Frontend Academy · บทเรียน

ควรใช้สถานะส่วนกลางหรือสถานะภายในเมื่อใด

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

คำถามเรื่องตำแหน่งของสถานะ

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

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

หากมีเพียงคอมโพเนนต์เดียวที่ใช้สถานะนี้ สถานะนั้นควรอยู่ใน useState/ref ของคอมโพเนนต์ดังกล่าว ไม่จำเป็นต้องแบ่งปันสถานะ ให้เก็บไว้ภายในคอมโพเนนต์ นี่เป็นกรณีที่ง่ายและพบได้บ่อยที่สุด

// Good: UI state local to the component
function Accordion() {
  const [isOpen, setIsOpen] = useState(false); // only this component cares
  return (
    <div>
      <button onClick={() => setIsOpen(o => !o)}>Toggle</button>
      {isOpen && <div>Content</div>}
    </div>
  );
}

การยกระดับสถานะ

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

บริบทที่ใช้ร่วมกัน — การแบ่งปันระดับกลาง

เมื่อจำเป็นต้องแบ่งปันสถานะภายในโครงสร้างย่อยโดยไม่ต้องส่งพร็อพไล่ผ่านคอมโพเนนต์ ควรใช้บริบท (React) หรือ provide/inject (Vue) เครื่องมือนี้เหมาะสำหรับการแบ่งปันในขอบเขตปานกลาง (เช่น หนึ่งหน้า หรือหนึ่งโมดูลฟีเจอร์)

คลังสถานะส่วนกลาง — สถานะทั่วทั้งแอปพลิเคชัน

ใช้คลังสถานะส่วนกลาง (Redux, Zustand, Pinia) สำหรับสถานะที่มีลักษณะดังนี้: 1) คอมโพเนนต์ที่ไม่เกี่ยวข้องกันหลายส่วนเข้าถึงสถานะนี้ 2) สถานะต้องคงอยู่ระหว่างการนำทาง 3) มีตรรกะการอัปเดตที่ซับซ้อน 4) ได้ประโยชน์จากการตรวจสอบด้วย DevTools

ตัวอย่าง: สถานะภายในคอมโพเนนต์

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

ตัวอย่าง: สถานะที่ยกระดับ

สถานะที่ยกระดับเหมาะสำหรับ: ตัวกรองที่ใช้ร่วมกันโดยรายการพี่น้องสองรายการ แท็บที่เลือกในกลุ่มแท็บ และข้อมูลแบบฟอร์มที่ใช้ร่วมกันระหว่างสองขั้นตอน

ตัวอย่าง: บริบท / Provide

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

ตัวอย่าง: คลังสถานะส่วนกลาง

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

สถานะฝั่งเซิร์ฟเวอร์เทียบกับสถานะฝั่งไคลเอ็นต์

ข้อมูลเครือข่าย (ดึงจาก API) เป็นหมวดหมู่พิเศษที่เรียกว่าสถานะฝั่งเซิร์ฟเวอร์ ซึ่งต้องจัดการสถานะกำลังโหลดและข้อผิดพลาด รวมถึงการแคชและการทำให้ข้อมูลในแคชหมดอายุ React Query / SWR / TanStack Query ช่วยจัดการสถานะฝั่งเซิร์ฟเวอร์ เพื่อให้คลังสถานะของคุณมุ่งเน้นที่สถานะฝั่งไคลเอ็นต์อย่างแท้จริง

ข้อผิดพลาดที่พบบ่อย: ใส่ทุกอย่างไว้ในคลังสถานะส่วนกลาง

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

กรอบการตัดสินใจ

ถามตัวเองว่า: 1) คอมโพเนนต์อื่นต้องใช้สถานะนี้หรือไม่ ไม่ต้องใช้ → ใช้สถานะภายในคอมโพเนนต์ 2) คอมโพเนนต์พี่น้องที่อยู่ใกล้กันต้องใช้หรือไม่ ต้องใช้ → ยกระดับสถานะ 3) โครงสร้างย่อยของคอมโพเนนต์ต้องใช้หรือไม่ ต้องใช้ → ใช้บริบท/provide 4) คอมโพเนนต์ที่ไม่เกี่ยวข้องกันหลายส่วนต้องใช้ หรือจำเป็นต้องตรวจสอบด้วย DevTools หรือไม่ ต้องใช้ → ใช้คลังสถานะส่วนกลาง

ตรวจสอบความเข้าใจ

ควรเก็บสถานะเปิด/ปิดของคอมโพเนนต์แอคคอร์เดียนเพียงหนึ่งคอมโพเนนต์ไว้ที่ใด?

ทบทวน: ตำแหน่งของสถานะ

หลักการ: ให้สถานะอยู่ใกล้กับส่วนที่ใช้งานมากที่สุด ใช้ useState/ref ภายในคอมโพเนนต์สำหรับสถานะของคอมโพเนนต์เดียว ยกระดับสถานะเมื่อคอมโพเนนต์พี่น้องต้องใช้ร่วมกัน ใช้บริบท/provide เมื่อโครงสร้างย่อยต้องใช้ร่วมกัน ใช้คลังสถานะส่วนกลางสำหรับสถานะทั่วทั้งแอปพลิเคชันที่มีการอัปเดตซับซ้อน ส่วนสถานะฝั่งเซิร์ฟเวอร์ (ข้อมูลจาก API) ควรอยู่ใน React Query/SWR ไม่ใช่คลังสถานะส่วนกลาง

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

บทเรียน “ควรใช้สถานะส่วนกลางหรือสถานะภายในเมื่อใด” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ควรใช้สถานะส่วนกลางหรือสถานะภายในเมื่อใด”

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

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

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

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

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

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

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

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

Redux Toolkit: createSlice และ configureStore
Zustand สำหรับสถานะ React แบบเบา
Pinia สำหรับ Vue: defineStore และ storeToRefs
ควรใช้สถานะส่วนกลางหรือสถานะภายในเมื่อใด

← กลับไปที่ Frontend Academy