سلام وقت بخیراستاد روش const [count, setCount] = useState(0); رو هم جلوتر آموزش میدین؟
سلام وقت شما بخیر
برای state در فانکشنال کامپوننت من چند تا نکته رو براتون مینویسم که یک جمعبندی داشته باشید:
1. useState(0): این قسمت هر چی داخل پرانتز قرار بدید مقدار اولیه هست برای متغیر count
2. count: مقدار فعلی هست تو این مثال که نوشتید، صفر هست.
3. setCount: تابع برای بروزرسانی count
4. [count, setCount]: به این قسمت از کد که داخل square bracket [ ] هست اصطلاحا array destructuring
چطوری state کار میکنه؟
1. وقتی کامپوننت برای اولین بار رندر میشه، مقدار اولیه count برابر با صفر هست.
2. وقتی میخوای count را بهروزرسانی کنید، setCount را با یک مقدار جدید فراخوانی میکنید.
3. ریاکت کامپوننت را با count بهروزرسانیشده دوباره رندر میکند.
***نکتههای خیلی مهم: 1. متغیرهای state رو مستقیماً تغییر ندید. حتما یک کپی ازش بگیرید
2-1. بروزرسانی مستقیم متغیر
// زمانی استفاده میشود که مقدار جدید به اِستیت قبلی وابسته نیست Direct value update: setCount(count + 1);
2-2. بروزرسانی با تابع
// وقتی اِستیت جدید به اِستیت قبلی وابسته است Functional update: setCount(prevCount => prevCount + 1)