راهنمای استفاده از useState در React
نوار رمز عبور شما با تایپ کردن، از ضعیف به قوی تغییر میکند. React تایپ کردن شما را از طریق state به خاطر میسپارد.
state دادهها را نگه میدارد. این ویژگی، آنچه را که تایپ میکنید یا کلیک میکنید، دنبال میکند.
تصور کنید نام خود را تایپ میکنید.
- state اولیه شما یک رشته خالی است.
- شما J را تایپ میکنید.
- شما تابعی را فراخوانی میکنید تا state را از "" به "J" بهروزرسانی کند.
- شما o را تایپ میکنید.
- شما تابع را برای تغییر state به "Jo" فراخوانی میکنید.
هر بار که state را بهروزرسانی میکنید، React رابط کاربری (UI) را دوباره رندر (re-render) میکند. رندر مجدد یعنی React نمای قدیمی را پاک کرده و نمای جدیدی را با دادههای بهروزرسانیشدهی شما ترسیم میکند.
چرا از متغیرهای معمولی استفاده نکنیم؟ یک متغیر معمولی در کد شما تغییر میکند اما صفحه را بهروزرسانی نمیکند. کاربران شما دادههای قدیمی را خواهند دید. state در React با متصل کردن دادههای شما به UI، این مشکل را حل میکند.
چگونه از useState استفاده کنیم:
آن را از React وارد (import) کنید.
import { useState } from 'react';آن را تعریف کنید.
const [age, setAge] = useState(20);
در این مثال:
- age مقدار فعلی شماست.
- setAge تابعی برای تغییر مقدار است.
- 20 مقدار اولیه شماست.
همین حالا امتحان کنید. یک پروژه React باز کنید. یک شمارنده (counter) بسازید. روی یک دکمه کلیک کنید تا شمارش بهروز شود. تغییر لحظهای صفحه را تماشا کنید.
منبع: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i