معرفی Hook ها در React - قسمت اول useState

کلا در نسخه 16 به بعد react تحولات و امکانات خاصی ایجاد شد و از نسخه 16.8 هم قابلیت ای به نام hook بوجود اومده که البته با کمی تاخیر می خوام خدمتتون توضیح بدم.

مطالعه بیشتر در سایت رسمی : https://reactjs.org/docs/hooks-intro.html

همانطورکه در جریان هستید با استفاده از function و یا class ها میشه کامپوننت های react رو ایجاد و فراخوانی کرد. در API های پیشفرض react برای class-component ها state و موارد مربوط به خودش وجود داره ولی تو functional-component ها نه خبری از state و setState بود و نه متدهای دیگه مثل componentDidMount و یا componentDidUpdate و ...

React JS Hooks - useState
React JS Hooks - useState

معرفی useState

پاراگراف قبلی در مورد این گفتم که خبری از state ها در functional-component نبود و فقط با گرفتن یک prop معمولی می تونستن render بشن و خروجی مورد نظر رو نمایش بدن. خیلی خلاصه بگم که hook ها در نسخه جدید اومدن تا این کمبودها رو جبران کنن و با کمک hook میشه state رو برای کامپوننت هایی که بصورت تابع پیاده سازی میشن شبیه سازی کرد و از متد useState باید کمک بگیریم.

مطالعه بیشتر در سایت رسمی : https://reactjs.org/docs/hooks-state.html

به مثال زیر که یک شمارنده ساده هستش توجه کنید :

import React, { useState } from 'react';
function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button ={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

تو این مثال ما متد یا همون هوک useState رو ابتدا import کردیم و داخل سورس صفحه آوردیم. مثل قبل یک تابع نوشتیم که قراره ازش بعنوان کامپوننت استفاده بشه , البته با این تفاوت که قبل از return بصورت Destructuring assignment یک متغیر const رو با خروجی متد useState مقداردهی کردیم و یک state پیشفرض صفر هم بصورت آرگومان به تابع دادیم. یعنی اینجا مقدار اولیه count صفر هستش !!!

در اینجا ما یک متغیر count داریم و یکی setCount که کاملا اسم ها اختیاری هستن. اولین چیزی که useState بر می گردونه مقدار state هستش که با count بهش دسترسی داریم و دومین هم متد برای اعمال تغییر روی مقدار state که ما setCount گذاشتیم که قراره بصورت آرگومان value جدید رو بعلاوه یک یعنی (state+1) کنه و به مقدار count اضافه بشه.

با هر بار کلیک روی دکمه Click me یکی به مقدار count اضافه شده و در خط اول مقدار جدید چاپ میشه.

در صورتیکه به state های بیشتری هم نیاز دارید باید مثل count یک خط دیگه بنویسید و state جدید بسازید مثلا نمونه زیر رو ببینید :

function ExampleWithManyStates() {
        // Declare multiple state variables!
     const [age, setAge] = useState(42);
     const [fruit, setFruit] = useState('banana');
     const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

در نمونه بالا برای مقادیر age , fruit و todos هرکدام state جدید ساختیم و متد متناسب با خودش رو برای اعمال تغییرات داره که داخل بدنه کامپوننت میشه با دکمه یا استفاده از متد تغییرات رو اعمال کرد.

تا مطلب بعدی خدانگهدار , موفق باشید