بیایید در مورد Hooks در React صحبت کنیم

معرفی:

قبل از صحبت در مورد قلاب در React، اجازه دهید به طور خلاصه در مورد چیستی React صحبت کنیم. React یک کتابخانه جاوا اسکریپت منبع باز است که برای ساخت رابط کاربری استفاده می شود. برای درک بهتر React، باید درک اولیه ای از جاوا اسکریپت داشته باشید. React از معماری مبتنی بر کامپوننت پیروی می کند که در آن رابط کاربری به اجزای قابل استفاده مجدد و مستقل تقسیم می شود. این مؤلفه ها وظیفه رندر بخشی از UI (رابط کاربری) و مدیریت وضعیت و رفتار خود را بر عهده دارند. React یک نحو اعلانی ارائه می‌کند و به توسعه‌دهندگان اجازه می‌دهد تا نحوه ظاهر رابط کاربری را بر اساس وضعیت فعلی توصیف کنند، و React می‌داند که چگونه به‌روزرسانی موثر و رندر کامپوننت‌ها را در صورت تغییر وضعیت انجام دهد.

Hooks در React یک ویژگی است که در React 16.8 برای ارائه ویژگی‌های حالت و سایر ویژگی‌های React در اجزای عملکردی معرفی شده است. قبل از معرفی هوک ها، عملکرد حالت و چرخه زندگی فقط در اجزای کلاس موجود بود. با هوک ها، اجزای عملکردی اکنون می توانند حالت و رفتار چرخه زندگی خود را بدون نیاز به تبدیل آنها به اجزای کلاس داشته باشند.

قلاب ها:

قلاب توابعی هستند که به شما امکان می دهند ویژگی های React State و چرخه حیات را از اجزای تابع «قلاب کنید». قلاب ها در کلاس ها کار نمی کنند. هوک ها راهی برای استفاده مجدد از منطق حالت حالت بین کامپوننت ها ارائه می دهند که کد را ماژولارتر و درک آن آسان تر می کند. آنها به شما اجازه می دهند بدون نیاز به اجزای کلاس و پیچیدگی های مرتبط با آنها، کدهای قابل استفاده مجدد و ترکیبی بنویسید.

React چند قلاب داخلی را ارائه می دهد. در این وبلاگ قصد دارم در مورد آن صحبت کنم استفاده از ایالت قلاب و useEffect قلاب.

• وضعیت استفاده:
  را استفاده از ایالت هوک به اجزای عملکردی اجازه می دهد تا وضعیت را مدیریت کنند. یک مقدار حالت و یک تابع برای به روز رسانی آن مقدار برمی گرداند. در اینجا یک مثال است:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

مثال بالا یک شمارنده را نشان می دهد. وقتی کاربر روی دکمه کلیک می کند، مقدار را افزایش می دهد. زنگ میزنیم استفاده از ایالت داخل یک جزء تابع برای اضافه کردن مقداری حالت محلی به آن. React این حالت را بین رندرهای مجدد حفظ می کند. استفاده از ایالت یک جفت را برمی گرداند: مقدار وضعیت فعلی و تابعی که به شما امکان می دهد آن را به روز کنید. می توانید این تابع را از یک رویداد کنترل کننده یا جای دیگری فراخوانی کنید. تنها استدلال برای استفاده از ایالت حالت اولیه است. در مثال بالا 0 است زیرا شمارنده ما از صفر شروع می شود.

قلاب State را می توان بیش از یک بار در یک جزء استفاده کرد:

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

• useEffect:
  را useEffect هوک به اجزای عملکردی اجازه می دهد تا عوارض جانبی مانند واکشی داده ها، اشتراک ها یا تغییر DOM را انجام دهند. تابعی را می‌پذیرد که بعد از هر رندر اجرا می‌شود و یک آرایه اختیاری از وابستگی‌ها برای کنترل زمان اجرای افکت. در اینجا یک مثال است:

import React, { useEffect, useState } from 'react';

function DataFetching() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Data fetching logic
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return <div>Data: {JSON.stringify(data)}</div>;
}

با استفاده از این هوک، به React می‌گویید که کامپوننت شما باید بعد از رندر کاری انجام دهد. React تابعی را که پاس داده‌اید به خاطر می‌آورد (از آن به عنوان «اثر» خود یاد می‌کنیم)، و بعد از انجام به‌روزرسانی‌های DOM، آن را فراخوانی می‌کند. در کد بالا توجه کنید که یک آرایه خالی در انتهای آن داریم useEffect. ما باید یک استدلال دوم را به آن منتقل کنیم استفاده از افکت، یک آرایه وابستگی، به منظور جلوگیری از یک حلقه بی پایان درخواست های واکشی.

پاکسازی اثر:

برخی از اثرات برای کاهش نشت حافظه نیاز به پاکسازی دارند. مهلت زمانی، اشتراک‌ها، شنوندگان رویداد و سایر جلوه‌هایی که دیگر مورد نیاز نیستند باید حذف شوند. ما این کار را با اضافه کردن یک تابع بازگشت در انتهای عبارت انجام می دهیم useEffect قلاب. به عنوان مثال:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    let timer = setTimeout(() => {
    setCount((count) => count + 1);
  }, 1000);

  return () => clearTimeout(timer)
  }, []);

  return <h1>I've rendered {count} times!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Timer />);

نتیجه
قلاب‌ها راه ساده‌تر و شهودی‌تری برای مدیریت وضعیت و عوارض جانبی در اجزای عملکردی ارائه می‌دهند. آنها به رویکرد توصیه شده برای نوشتن کامپوننت های React تبدیل شده اند و در جامعه React پذیرفته شده اند. آنها توابع جاوا اسکریپت هستند، اما هنگام استفاده از آنها باید دو قانون را دنبال کنید:

• فقط قلاب ها را در سطح بالا فراخوانی کنید! Hooks را درون حلقه‌ها، شرایط یا توابع تودرتو صدا نکنید. درعوض، همیشه از Hooks در بالاترین سطح تابع React خود، قبل از بازگشت زودهنگام استفاده کنید. با پیروی از این قانون، اطمینان حاصل می کنید که هر بار که یک جزء رندر می شود، Hook ها به همان ترتیب فراخوانی می شوند. این چیزی است که به React اجازه می‌دهد تا وضعیت Hooks را بین تماس‌های چندگانه useState و useEffect به درستی حفظ کند.

• فقط قلاب ها را از توابع React فراخوانی کنید! Hooks را از توابع معمولی جاوا اسکریپت فراخوانی نکنید. در عوض، می‌توانید Hooks را از اجزای تابع React فراخوانی کنید.