Props คืออินพุต ที่ส่งไปให้ คอมโพเนนต์จากพ่อแม่ (อ่านอย่างเดียวจากมุมมองของลูก) State คือข้อมูลที่คอมโพเนนต์ เป็นเจ้าของและจัดการภายใน (สามารถเปลี่ยนแปลงได้) ความแตกต่าง: props มาจากภายนอกและไม่เปลี่ยนแปลงภายในคอมโพเนนต์; state เป็นแบบภายในและเปลี่ยนแปลงได้
() {
;
}
< name= />
Props ไหลลงไป จากพ่อแม่ไปยังลูก ลูกอ่านแต่ไม่สามารถเปลี่ยนแปลงได้ — เพื่อเปลี่ยนค่า prop พ่อแม่ต้องส่งค่าใหม่
function Counter() {
const [count, setCount] = useState(0); // `count` is this component's own state
return <button onClick={() => setCount(count + 1)}>{count}</button>;
// the component updates its OWN state via setCount
}
State ถูกสร้างและควบคุมภายในคอมโพเนนต์; คอมโพเนนต์เปลี่ยนแปลง (setCount/setState) และการเปลี่ยนแปลงทำให้เกิด re-render
Props State
Source passed from parent created in the component
Mutable? read-only (in child) yes (via setter)
Who controls it the parent the component itself
Triggers render when the parent changes it when the component updates it
Purpose configure/pass data in track changing internal data
function Parent() {
const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent
return <Child name={user.name} />; // passed DOWN as a PROP
}
State ของคอมโพเนนต์หนึ่งมักจะถูกส่งให้ลูกเป็น prop ยกสถานะขึ้นและส่งลงมาคือแบบแผนนี้เสียด — พ่อแม่เป็นเจ้าของ state ลูกได้รับเป็น props
ความแตกต่างระหว่าง state กับ props เป็นสิ่งพื้นฐานสำหรับเฟรมเวิร์กที่ใช้คอมโพเนนต์
มันกำหนดความเป็นเจ้าของข้อมูลและการไหลของข้อมูล: props เป็นการกำหนดค่าภายนอก อ่านอย่างเดียว (ข้อมูลไหลลง); state เป็นแบบภายในข้อมูลที่เปลี่ยนแปลงได้ที่คอมโพเนนต์จัดการ
การสับสน — การเปลี่ยนแปลง props หรือการทำซ้ำ props ใน state — สร้างบัญหาแบบคลาสสิก
ความเข้าใจว่าข้อมูลไหลลงมาเป็น props ในขณะที่คอมโพเนนต์แต่ละตัวเป็นเจ้าของ state ของตนเอง คือรากฐานของการออกแบบคอมโพเนนต์ React/Vue/Angular