0Pricing
React Academy · บทเรียน

การเลือกตำแหน่งจัดเก็บสถานะที่เหมาะสม

ใช้กรอบการตัดสินใจเพื่อเลือกสถานะเฉพาะที่ สถานะที่ยกขึ้น หรือสถานะส่วนกลาง

การเลือกตำแหน่งจัดเก็บสถานะที่เหมาะสม เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

ยินดีต้อนรับ

ในบทเรียนนี้ คุณจะได้เรียนรู้กรอบการตัดสินใจเชิงปฏิบัติเพื่อพิจารณาว่าสถานะควรอยู่ในคอมโพเนนต์เดียว บรรพบุรุษร่วม บริบทของ React หรือไลบรารีจัดการสถานะส่วนกลาง

ขั้นที่ 1: ใครใช้สถานะนี้

ขั้นแรกให้ถามว่า: คอมโพเนนต์ใดเรนเดอร์โดยใช้สถานะนี้ จดรายการไว้ หากมีเพียงคอมโพเนนต์เดียวที่ใช้สถานะ ให้เก็บสถานะไว้ภายในคอมโพเนนต์นั้น

สถานะภายในคอมโพเนนต์

สถานะที่ใช้โดยคอมโพเนนต์เพียงหนึ่งตัวจะอยู่ในคอมโพเนนต์นั้นด้วย useState ตัวอย่างเช่น ดรอปดาวน์เปิดอยู่หรือไม่ ค่าปัจจุบันของช่องกรอกข้อมูลที่ถูกควบคุม และคำแนะนำปรากฏอยู่หรือไม่
function Toggle() {
  const [on, setOn] = useState(false);
  return <button onClick={() => setOn(!on)}>{on ? 'On' : 'Off'}</button>;
}

ขั้นที่ 2: ค้นหาบรรพบุรุษร่วม

หากมีหลายคอมโพเนนต์ที่ต้องใช้สถานะ ให้ค้นหาบรรพบุรุษร่วมที่ใกล้ที่สุดในต้นไม้คอมโพเนนต์ ย้ายสถานะไปไว้ที่นั่น แล้วส่งลงมาเป็นพร็อพ

สถานะที่ย้ายขึ้น (2–3 ระดับ)

สถานะที่ใช้ร่วมกันโดยคอมโพเนนต์ 2–3 ตัวในระดับการซ้อนเดียวกันเหมาะสำหรับการย้ายขึ้น คอมโพเนนต์แม่ร่วมเป็นเจ้าของสถานะ และส่งต่อสถานะลงมาผ่านพร็อพ

ขั้นที่ 3: การส่งพร็อพผ่านลำดับชั้นลึกเกินไปหรือไม่

หากบรรพบุรุษร่วมอยู่เหนือคอมโพเนนต์ผู้ใช้ 4 ระดับขึ้นไป การส่งพร็อพผ่านคอมโพเนนต์ตัวกลางจะทำให้เกิดโค้ดส่วนเกิน ควรพิจารณาใช้บริบท

สถานะบริบท

ใช้บริบทสำหรับข้อกังวลที่ตัดผ่านหลายส่วน ซึ่งคอมโพเนนต์จำนวนมากทั่วทั้งต้นไม้ต้องใช้ เช่น ผู้ใช้ที่ผ่านการยืนยันตัวตนในปัจจุบัน ธีมที่กำลังใช้งาน และภาษาท้องถิ่นที่เลือก สิ่งเหล่านี้เปลี่ยนแปลงไม่บ่อยและมีผู้ใช้จำนวนมาก

ขั้นที่ 4: สถานะซับซ้อนหรือใช้ร่วมกันระหว่างหน้าเว็บหรือไม่

หากสถานะมีตรรกะการอัปเดตที่ซับซ้อน ต้องรองรับการย้อนกลับหรือทำซ้ำ ต้องคงอยู่เมื่อเปลี่ยนหน้า หรือถูกเข้าถึงจากต้นไม้คอมโพเนนต์ที่แยกจากกันโดยสิ้นเชิง ให้ใช้ไลบรารีจัดการสถานะโดยเฉพาะ (Zustand, Redux)

สถานะจากเซิร์ฟเวอร์แตกต่างออกไป

ข้อมูลที่ดึงมาจากเซิร์ฟเวอร์คือ *สถานะจากเซิร์ฟเวอร์* ไม่ใช่สถานะส่วนติดต่อผู้ใช้ อย่าเก็บข้อมูลนี้ไว้ใน useState หรือที่เก็บส่วนกลาง ให้ใช้ React Query, SWR หรือ RTK Query ซึ่งจัดการการแคช การดึงข้อมูลใหม่ และสถานะข้อผิดพลาดโดยอัตโนมัติ

ผังงานการตัดสินใจ

ผู้ใช้ 1 คอมโพเนนต์ → useState ภายในคอมโพเนนต์ ผู้ใช้ 2–3 คอมโพเนนต์ในระดับใกล้เคียงกัน → ย้ายไปไว้ที่คอมโพเนนต์แม่ การส่งพร็อพผ่าน 4 ระดับขึ้นไป → บริบท ตรรกะซับซ้อนหรือข้ามต้นไม้ → Zustand/Redux ข้อมูลจากเซิร์ฟเวอร์ → React Query/SWR

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ตำแหน่งใดเหมาะสมที่สุดสำหรับผู้ใช้ที่ผ่านการยืนยันตัวตนในปัจจุบัน ซึ่งคอมโพเนนต์จำนวนมากในแอปขนาดใหญ่จำเป็นต้องเข้าถึง

สรุปทบทวน

จับคู่ตำแหน่งของสถานะกับผู้ใช้: สถานะภายในคอมโพเนนต์สำหรับผู้ใช้หนึ่งราย สถานะที่ย้ายขึ้นสำหรับผู้ใช้ไม่กี่รายที่อยู่ใกล้กัน บริบทสำหรับผู้ใช้จำนวนมากในหลายระดับ ไลบรารีจัดการสถานะสำหรับตรรกะที่ซับซ้อนหรือการใช้ข้ามต้นไม้ และ React Query สำหรับข้อมูลจากเซิร์ฟเวอร์

จบหลักสูตร

ขอแสดงความยินดี! คุณเรียนจบ **การย้ายสถานะขึ้นและวิธีแก้ปัญหาการส่งพร็อพผ่านลำดับชั้น** แล้ว ตอนนี้คุณมีกรอบการตัดสินใจที่ชัดเจนสำหรับพิจารณาว่าสถานะควรอยู่ที่ใดและควรแบ่งปันอย่างถูกต้องอย่างไร

คำถามที่พบบ่อย

บทเรียน “การเลือกตำแหน่งจัดเก็บสถานะที่เหมาะสม” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเลือกตำแหน่งจัดเก็บสถานะที่เหมาะสม” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเลือกตำแหน่งจัดเก็บสถานะที่เหมาะสม”

ใช้กรอบการตัดสินใจเพื่อเลือกสถานะเฉพาะที่ สถานะที่ยกขึ้น หรือสถานะส่วนกลาง คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การเลือกตำแหน่งจัดเก็บสถานะที่เหมาะสม” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม

ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ยกสถานะขึ้น: หลักการและตัวอย่าง
  2. การส่งพร็อพส์ต่อหลายชั้น: เมื่อใดจึงเป็นปัญหาและเมื่อใดจึงเหมาะสม
  3. รูปแบบการสื่อสารระหว่างคอมโพเนนต์พี่น้อง
  4. การเลือกตำแหน่งจัดเก็บสถานะที่เหมาะสม
← กลับไปที่ React Academy