Props adalah masukan yang diluluskan ke komponen oleh induknya (hanya baca dari perspektif anak). State adalah data yang komponen memiliki dan mengurusnya secara dalaman (ia boleh mengubahnya). Perbezaannya: props datang dari luar dan tidak berubah dalam komponen; state adalah dalaman dan boleh diubah.
() {
;
}
< name= />
Props mengalir ke bawah dari induk ke anak. Anak membacanya tetapi tidak boleh mengubahnya — untuk mengubah nilai prop, induk mesti meluluskan yang baru.
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 dibuat dan dikawal di dalam komponen; komponen mengubahnya (melalui setCount/setState), dan mengubahnya mencetuskan pemaparan semula.
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 satu komponen sering diluluskan ke anak sebagai prop. Mengangkat state dan meluluskannya ke bawah adalah betul-betul pola ini — induk memiliki state, anak menerima sebagai props.
Perbezaan state-vs-props adalah asas dalam rangka kerja berasaskan komponen.
Ia menentukan pemilikan data dan aliran: props ialah konfigurasi luaran, hanya baca (data ke bawah); state ialah data dalaman dan boleh diubah yang diuruskan oleh komponen.
Menukar mereka — mengubah props, atau menduplikat props ke dalam state — menyebabkan pepijat klasik.
Memahami bahawa data mengalir ke bawah sebagai props manakala setiap komponen memiliki state miliknya sendiri adalah batu asas reka bentuk komponen React/Vue/Angular.