Props არის შეყვანა, რომელიც გადაცემულია კომპონენტში მის მშობელი კომპონენტიდან (მხოლოდ წაკითხვადი დიტიკოს თვალსაზრისით). State არის მონაცემი, რომელიც კომპონენტი სამის და შიგნით მართავს (შეუძლია მას შეცვალოს). განსხვავება: props მოდის გარედან და არ იცვლება კომპონენტის შიგნით; state არის შიგნით და ცვალებადი.
() {
;
}
< name= />
Props დაბლა ჩადინებული მშობელიდან დიტიკოში. დიტიკო მათ კითხულობს, მაგრამ ვერ ცვლის — props-ის მნიშვნელობის შესაცვლელად, მშობელმა უნდა გადაცეს ახალი.
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-სა და props-ს შორის განსხვავება ფუნდამენტური კომპონენტ-ორიენტირებული ფრეიმვორკებში.
ის განსაზღვრავს მონაცემთა ხელმფლობელობას და ნაკადს: props არის გარე, მხოლოდ წაკითხვადი კონფიგურაცია (მონაცემი ქვემოთ); state არის შიგნით, ცვალებადი მონაცემი, რომელიც კომპონენტი მართავს.
თავისა პროპსის შედეგად ან props-ის გაორმაგება state-ში — იწვევს კლასიკურ ბაგებს.
გაგება, რომ მონაცემი ჩადინებული როგორც props, ხოლო თითოეული კომპონენტი სამის საკუთარი state ეს არის React/Vue/Angular კომპონენტების დიზაინის საფუძველი.