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 ਦੁਆਰਾ), ਅਤੇ ਇਸ ਨੂੰ ਬਦਲਣਾ ਇੱਕ ਦੁਬਾਰਾ-ਰੇਂਡਰ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਦਾ ਹੈ।
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 ਨੂੰ ਉੱਪਰ ਚੁੱਕਣਾ ਅਤੇ ਇਸ ਨੂੰ ਹੇਠਾਂ ਲੰਘਾਉਣਾ ਬਿਲਕੁਲ ਇਹੀ ਪੈਟਰਨ ਹੈ — ਮਾਤਾ-ਪਿਤਾ state ਦੇ ਮਾਲਕ ਹਨ, ਬੱਚੇ ਇਸ ਨੂੰ props ਵਜੋਂ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ।
State-vs-props ਵਿਚਕਾਰ ਅੰਤਰ ਕੰਪੋਨੈਂਟ-ਆਧਾਰਿਤ ਫ੍ਰੇਮਵਰਕ ਲਈ ਬੁਨਿਆਦੀ ਹੈ।
ਇਹ ਡੇਟਾ ਮਾਲਕਾਨੇ ਅਤੇ ਪ੍ਰਵਾਹ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ: props ਬਾਹਰੀ, ਪੜ੍ਹਨ ਲਈ ਸੀਮਿਤ ਕੌਂਫਿਗੁਰੇਸ਼ਨ ਹਨ (ਡੇਟਾ ਹੇਠਾਂ); state ਅੰਦਰੂਨੀ, ਪਰਿਵਰਤਨਯੋਗ ਡੇਟਾ ਹੈ ਜਿਸਨੂੰ ਕੰਪੋਨੈਂਟ ਪ੍ਰਬੰਧਿਤ ਕਰਦਾ ਹੈ।
ਉਨ੍ਹਾਂ ਨੂੰ ਉਲਝਾਉਣਾ — props ਨੂੰ ਬਦਲਣਾ, ਜਾਂ props ਨੂੰ state ਵਿੱਚ ਡੁਪਲੀਕੇਟ ਕਰਨਾ — ਕਲਾਸਿਕ ਬਗ ਪੈਦਾ ਕਰਦਾ ਹੈ।
ਇਹ ਸਮਝਣਾ ਕਿ ਡੇਟਾ props ਵਜੋਂ ਹੇਠਾਂ ਵਹਿੰਦਾ ਹੈ ਜਦਕਿ ਹਰੇਕ ਕੰਪੋਨੈਂਟ ਆਪਣਾ ਖੁਦ ਦਾ state ਮਾਲਕ ਹੈ React/Vue/Angular ਕੰਪੋਨੈਂਟ ਡਿਜਾਈਨ ਦੀ ਨੀਂਦ ਹੈ।