State คือข้อมูลใด ๆ ที่สามารถ เปลี่ยนแปลงตามเวลา และ UI ขึ้นอยู่กับเพื่อแสดงผล เมื่อ state เปลี่ยน UI จะได้รับการอัปเดตเพื่อสะท้อนสิ่งนั้น มันคือ "หน่วยความจำ" ของแอปพลิเคชันของคุณในช่วงเวลาใด ๆ
✓ A counter value, a form's input text, a toggle (on/off)
✓ Whether a modal is open, the active tab, loading/error flags
✓ The logged-in user, items in a cart, fetched API data
✓ The current theme (dark/light), selected filters
function Counter() {
const [count, setCount] = useState(0); // `count` is state
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times {/* the UI is a function of state */}
</button>
);
}
แนวคิดหลักของเฟรมเวิร์กสมัยใหม่: UI = f(state). คุณไม่ต้องอัปเดต DOM ด้วยตนเอง คุณเปลี่ยน state และเฟรมเวิร์กจะแสดงผล UI ใหม่เพื่อให้ตรงกัน คลิกปุ่ม → count เปลี่ยน → ตัวเลขที่แสดง อัปเดตอัตโนมัติ
State: changes over time, drives re-renders (count, user, isOpen)
Constants: never change (PI, config URLs) — not state
Derived: computed FROM state (fullName from firstName + lastName) — don't store separately
ไม่ใช่ทุกตัวแปรที่เป็น state — เพียงข้อมูลที่เปลี่ยน และ ส่งผลต่อสิ่งที่แสดงผล ค่าที่คุณสามารถคำนวณจาก state ที่มีอยู่ไม่ควรเก็บไว้เป็น state แยกต่างหาก (มีความเสี่ยงที่พวกมันจะไม่ซิงโครไนซ์)
Local/UI state → belongs to one component (input text, isOpen)
Global state → shared app-wide (user, theme, cart)
Server state → data fetched from an API (cached remote data)
URL state → in the address bar (filters, page number)
การทำความเข้าใจ state เป็น "ข้อมูลที่เปลี่ยนแปลงและขับเคลื่อน UI" คือรากฐานของการพัฒนา frontend ทั้งหมด
แบบจำลองทางจิต UI = f(state) อธิบายวิธีการทำงานของ React/Vue/Angular — คุณจัดการ state และมุมมองก็ตามตามไปด้วย
การรู้ว่า อะไร คือ และ ไม่ใช่ state (และไม่ทำให้ค่าที่อนุมานมาซ้ำกัน) เป็นขั้นตอนแรกสู่การจัดการอย่างดี ทุกสิ่งในการจัดการ state สร้างขึ้นบนแนวคิดนี้
คลังคำถามสัมภาษณ์งาน IT พร้อมคำตอบโดยละเอียด — ตั้งแต่ระดับ Junior ถึง Senior
บริจาค