با این بهترین روش ها از React Hooks بیشترین بهره را ببرید

React Hooks یک مفهوم پیچیده است و دانستن نحوه استفاده از آنها ممکن است دشوار باشد. این نکات را دنبال کنید تا بهترین نتیجه را از React ببرید.

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

همه چیز را در مورد اصول React Hooks بیاموزید و بهترین روش ها را برای استفاده از آنها در برنامه های React خود کشف کنید.

React Hooks چیست؟

React Hooks به شما امکان می دهد بدون نوشتن کد اضافی از حالت و سایر ویژگی های React استفاده کنید. هوک ها یک راه عالی برای خوانایی و نگهداری کد شما هستند.

چند Hook مختلف در React وجود دارد، اما رایج‌ترین آنها useState و useEffect هستند. قلاب useState به شما امکان می دهد حالت را به اجزای خود اضافه کنید. این برای مواردی مانند پیگیری ورودی کاربر یا تغییرات در فرم مفید است. قلاب useEffect به شما امکان می دهد هر زمان که یک جزء ارائه می شود یک تابع را اجرا کنید. این برای مواردی مانند واکشی داده از یک API یا راه‌اندازی اشتراک مفید است.

چه زمانی باید از React Hook استفاده کرد؟

هر زمان که نیاز به افزودن عملکرد اضافی به یک کامپوننت داشتید، باید از React Hooks استفاده کنید. برای مثال، اگر نیاز به پیگیری ورودی کاربر دارید، از قلاب useState استفاده کنید. اگر نیاز به واکشی داده از یک API دارید، از قلاب useEffect استفاده کنید. همچنین می توانید قلاب های سفارشی برای تماس های API ایجاد کنید.

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

بهترین روش ها با React Hooks

اکنون که می دانید React Hooks چیست و چه زمانی از آنها استفاده کنید، اجازه دهید در مورد برخی از بهترین روش ها صحبت کنیم.

1. فقط Hooks را از توابع React فراخوانی کنید

شما فقط باید React Hooks را از توابع React فراخوانی کنید. اگر سعی کنید قلاب‌های واکنش را از یک جزء کلاس فراخوانی کنید، با خطا مواجه می‌شوید.

این به این دلیل است که شما فقط می توانید یک React Hook را از یک تابع React فراخوانی کنید. توابع React مؤلفه هایی هستند که شما با کلمه کلیدی تابع اعلام می کنید.

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

import React, { useState } from'react';
 
functionApp() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>{count}</p>
      <buttononClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

و در اینجا یک مثال از یک جزء کلاس است:

import React, { Component } from'react';
 
classAppextendsComponent {
  state = {
    count: 0
  };
 
  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

مثال اول مولفه App را با استفاده از کلمه کلیدی تابع اعلام می کند، در حالی که مثال دوم از کلمه کلیدی class استفاده می کند.

2. فقط از One useEffect Hook استفاده کنید

اگر از قلاب useEffect استفاده می کنید، باید فقط از یک قلاب برای هر جزء استفاده کنید. این به این دلیل است که هر زمان که یک کامپوننت رندر می شود، useEffect اجرا می شود.

اگر چندین قلاب useEffect دارید، همه آنها هر زمان که یک جزء ارائه شود اجرا می شوند. این می تواند منجر به رفتار غیرمنتظره و مشکلات عملکرد شود. در مثال زیر، هر زمان که مؤلفه App ارائه شود، هر دو useEffects اجرا خواهند شد.

import React, { useState, useEffect } from'react';
 
functionApp() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    console.log('This will run whenever the App component renders!');
  }, []);
 
  useEffect(() => {
    console.log('This will also run whenever the App component renders!');
  }, []);
 
  return (
    <div>
      <p>{count}</p>
      <buttononClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

به جای استفاده از چند قلاب useEffect، می توانید از یک قلاب useEffect استفاده کنید و تمام کدهای خود را داخل آن قرار دهید. در مثال زیر، هر زمان که مؤلفه App رندر شود، تنها یک قلاب useEffect اجرا می‌شود.

import React, { useState, useEffect } from'react';
 
functionApp() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    console.log('This will run whenever the App component renders!');
    console.log('This will also run whenever the App component renders!');
  }, []);
 
  return (
    <div>
      <p>{count}</p>
      <buttononClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

این بدان معنی است که شما فقط می توانید React Hooks را از مثال اول فراخوانی کنید. اگر سعی کنید React Hooks را از مثال دوم فراخوانی کنید، با خطا مواجه خواهید شد.

3. از Hooks در سطح بالا استفاده کنید

یکی از بهترین روش‌های React Hook، استفاده از آن‌ها در سطح بالا است. باید از استفاده از قلاب ها در داخل حلقه ها، شرایط یا توابع تو در تو خودداری کنید. به عنوان مثال، اگر ازState در یک حلقه for استفاده کنید، هر بار که حلقه اجرا می شود، React یک متغیر حالت جدید ایجاد می کند. این می تواند منجر به رفتار غیرمنتظره شود.

import React, { useState } from'react';
 
functionApp() {
  for (let i = 0; i < 10; i++) {
    // Don't do this!
    const [count, setCount] = useState(0);
  }
 
  return (
    <div>
      <p>{count}</p>
      <buttononClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

در مثال بالا، جزء App فقط تعداد و دکمه را از تکرار نهایی حلقه ارائه می‌کند. این به این دلیل است که React فقط متغیر حالت را از آخرین تکرار به روز می کند.

به جای استفاده ازState در داخل یک حلقه، می توانید یک متغیر حالت را در خارج از حلقه اعلام کنید. به این ترتیب، React تنها یک متغیر حالت ایجاد می کند و بر اساس آن آن را به روز می کند.

import React, { useState } from'react';
 
functionApp() {
  // This is the correct way to use useState inside a loop
  const [count, setCount] = useState(0);
 
  for (let i = 0; i < 10; i++) {
    // ...
  }
 
  return (
    <div>
      <p>{count}</p>
      <buttononClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

4. از قلاب ها بیش از حد استفاده نکنید

React Hook ها ابزار قدرتمندی هستند، اما باید از استفاده بیش از حد از آنها خودداری کنید. اگر متوجه شدید که از چند هوک در هر کامپوننت استفاده می کنید، ممکن است از آنها بیش از حد استفاده کنید.

React Hook ها برای زمانی که نیاز به اشتراک گذاری حالت بین چندین مؤلفه دارید بسیار مفید هستند. از استفاده از هوک های غیر ضروری خودداری کنید زیرا می توانند خواندن کد شما را سخت کنند و در صورت استفاده بیش از حد ممکن است بر عملکرد تأثیر بگذارند.

با استفاده از React 18 Hooks قابلیت های بیشتری را اضافه کنید

با انتشار React 18، قلاب های جدیدی در دسترس هستند. هر هوک مخصوص یک ویژگی React خاص است. می توانید لیستی از تمام هوک های موجود را در وب سایت React پیدا کنید. اما پرکاربردترین قلاب ها هنوز useState و useEffect هستند.

منبع مقاله