آشنایی با useState

مقدمه

به فصل پنجم خوش آمدید! تاکنون، کامپوننت‌هایی که ساخته‌ایم ایستا بوده‌اند. آنها props را دریافت کرده و یک UI را نمایش می‌دهند، اما نمی‌توانند اطلاعاتی را به خاطر بسپارند یا در پاسخ به تعاملات کاربر، خود را تغییر دهند. برای ساخت رابط‌های کاربری پویا، کامپوننت‌ها نیاز به «حافظه» دارند. در React، این حافظه «وضعیت» یا state نامیده می‌شود.

useState اولین و مهم‌ترین «هوک» (Hook) در React است که به ما اجازه می‌دهد تا متغیرهای state را به کامپوننت‌های تابعی خود اضافه کنیم. هوک‌ها توابع خاصی هستند که به شما اجازه می‌دهند تا به قابلیت‌های React (مانند state و چرخه حیات) از داخل کامپوننت‌های تابعی «قلاب» بزنید.

وارد کردن و فراخوانی useState

برای استفاده از useState، ابتدا باید آن را از کتابخانه React وارد کنیم. سپس، در سطح بالای کامپوننت خود، آن را فراخوانی می‌کنیم.

ساختار useState

تابع useState یک آرگومان می‌گیرد که مقدار اولیه state است و یک آرایه با دقیقاً دو عضو را برمی‌گرداند:

• متغیر state (عضو اول): مقداری که در حال حاضر در state ذخیره شده است. در اولین رندر، این مقدار برابر با مقدار اولیه‌ای است که به useState پاس داده‌اید.
• تابع setter (عضو دوم): تابعی که به شما اجازه می‌دهد تا state را به‌روزرسانی کنید. وقتی این تابع را فراخوانی می‌کنید، React کامپوننت را دوباره رندر کرده و state جدید را در اختیار آن قرار می‌دهد.

ما معمولاً از سینتکس destructuring آرایه برای دریافت این دو مقدار استفاده می‌کنیم.

JAVASCRIPT (React)

import { useState } from 'react';

function Counter() {
  // 1. Declare a state variable named "count"
  // 2. Initialize it to 0
  // 3. `setCount` is the function to update it
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

در این مثال کلاسیک، ما یک متغیر state به نام count با مقدار اولیه`0`تعریف کرده‌ایم. useState یک آرایه [0, f] را برمی‌گرداند که ما آن را به [count, setCount] `destructure` می‌کنیم.

وقتی کاربر روی دکمه کلیک می‌کند، تابع setCount با مقدار count + 1 فراخوانی می‌شود. این کار به React می‌گوید که state تغییر کرده است. React سپس کامپوننت Counter را دوباره رندر می‌کند. این بار، useState مقدار جدید count (که اکنون 1 است) را برمی‌گرداند و UI به‌روز شده با متن "You clicked 1 times" نمایش داده می‌شود.

قوانین هوک‌ها

هوک‌ها قوانین مشخصی دارند که باید همیشه رعایت شوند:

• تنها در سطح بالا فراخوانی کنید: هوک‌ها را فقط در سطح بالای کامپوننت‌های تابعی خود فراخوانی کنید. آنها را در داخل حلقه‌ها، شرط‌ها یا توابع تودرتو فراخوانی نکنید. این قانون تضمین می‌کند که هوک‌ها همیشه در هر بار رندر، به یک ترتیب یکسان فراخوانی می‌شوند و React می‌تواند state صحیح را به هر کدام اختصاص دهد.
• تنها از داخل کامپوننت‌های تابعی فراخوانی کنید: هوک‌ها را از توابع جاوااسکریپت عادی فراخوانی نکنید. (یک استثنا وجود دارد: شما می‌توانید هوک‌ها را از داخل «هوک‌های سفارشی» یا Custom Hooks دیگر فراخوانی کنید که در درس‌های آینده به آن خواهیم پرداخت).

در این درس، ما با useState به عنوان اولین و اساسی‌ترین هوک React آشنا شدیم. دیدیم که چگونه این هوک ساده به ما اجازه می‌دهد تا به کامپوننت‌های تابعی خود «حافظه» یا state اضافه کرده و آنها را در پاسخ به تعاملات کاربر، پویا و تعاملی کنیم.

درک کامل useState کلید ورود به دنیای ساخت اپلیکیشن‌های پیچیده با React است. در درس بعدی، به «تغییر state و رندر مجدد کامپوننت» خواهیم پرداخت و با جزئیات بیشتری بررسی خواهیم کرد که React چگونه به‌روزرسانی‌های state را مدیریت کرده و `UI` را هماهنگ نگه می‌دارد.