React hook چیست

هوک در ری‌اکت چیست؟ راهنمای کامل آموزش پیاده‌سازی Hook در React

در برنامه‌نویسی React، کامپوننت‌های تابعی بسیار کاربردی هستند؛ ولی قابلیت این کامپوننت‌ها دقیقاً محدود به چیزی است که برای آن‌ها تعریف شده است. به‌همین‌دلیل، گاهی به‌ناچار باید کامپوننت‌هایمان را در قالب یک کلاس بنویسیم. بااین‌حال، خوشبختانه روشی وجود دارد که می‌تواند بعضی از قابلیت‌های کامپوننت‌های تابعی و کلاسی را توأمان داشته باشد و آن چیزی نیست جز هوک (Hook). در این مطلب، شما را با هوک در‌ ری‌اکت آشنا خواهیم کرد؛ پس تا پایان با ما همراه باشید.

هوک در ری‌اکت چیست؟

هوک‌ها قابلیت‌های جدیدی هستند که از نسخه 16.8.0 ری‌اکت به آن اضافه شدند. این روش‌ها به ما کمک می‌کنند تا بتوانیم قابلیت‌های ری‌اکت مثل State و چرخه حیات (Lifecycle) را به راحت‌ترین شکل ممکن و بدون نیاز به کلاس‌ها به کامپوننت‌های تابع اضافه کنیم.

نکته: از هوک‌ها نمی‌توان در کلاس‌ها استفاده کرد!

هوک در ری اکت

hook در ری‌اکت چیست و چگونه می‌توان آن را پیاده‌سازی کرد؟

چگونه هوک را در کدهای React پیاده‌سازی کنیم؟

برای اضافه‌کردن هوک به کدهای React، می‌توانید از کدهای زیر استفاده کنید. دقت کنید که در این کدها باید یک نسخه React را حتماً مشخص کنید:

# Via npm
$ npm install --save [email protected] [email protected]

# Or via Yarn
$ yarn add [email protected] [email protected]

قوانین کلی نوشتن هوک‌ها

به‌طورکلی، در نوشتن کدهای هوک باید به چند نکته دقت کنید:

  • هوک‌ها باید با کلمه «Use» شروع شوند.
  • هوک‌ها را فقط می‌توان از کامپوننت‌های توابع و از هوک‌های سفارشی فراخواند. این ویژگی را می‌توان مزیتی مهم دانست؛ چون باعث ایجاد منطق گروهی بین همه کامپوننت‌های شما می‌شود.
  • از هوک فقط باید در سطح بالای کدهایتان استفاده کنید، نه داخل دستورهای شرطی و حلقه‌ای یا توابع تودرتو که در کامپوننت‌های توابع دارید. با این کار مطمئن خواهید بود که هوک‌ها با همان ترتیب و بر‌اساس هر رندر فراخوانی می‌شوند.
آموزش hook در react

قوانین هوک در ری‌اکت شامل چه مواردی است؟

مقداردهی State کامپوننت‌ها با هوک در ری‌اکت

اگر بخواهیم به‌کمک hook در react کامپوننت تابعی از نوع Stateful بسازیم، باید با دستور «useState» از React package ،State مدنظر را مقداردهی کنیم. این روش یک پارامتر را برای تنظیم State اولیه می‌گیرد و دو چیز را برمی‌گرداند: یکی آرایه‌ای حاوی State فعلی و دیگری تابعی برای تنظیم State.

در کدهای زیر، یک کامپوننت تابع از نوع Stateful داریم که با هربار کلیک، رنگی را ردیابی می‌کند که به‌طور تصادفی سِت شده است:

import React, { useState } from "react";
import { render } from "react-dom";

function StatefulFn() {
  const [color, setColor] = useState(false);

  function onClick() {
    const colors = [
      "#008F68",
      "#6DB65B",
      "#4AAE9B",
      "#FAE042",
      "#EFBB35",
      "#DFA612"
    ];

    setColor(colors[Math.floor(Math.random() * colors.length)]);
  }

  return (
    <button onClick={onClick} style={{ backgroundColor: color }}>
      Click to Change Button Color
    </button>
  );
}

const container = document.createElement("div");
document.body.appendChild(container);
render(<StatefulFn />, container);

شیوه useState طوری طراحی ‌شده است که بتواند با مقدار واحد استفاده شود، نه با شی‌ء State (یعنی برخلاف سازوکار کامپوننت‌های Class). به‌همین‌دلیل، یا باید خودمان به‌صورت دستی شی‌ء State را حفظ کنیم یا به روشی ساده‌تر فقط یک بار useState را فراخوانی کنیم تا هریک از متغیرها را در State‌‌ خود ردیابی کنیم:

const [color, setColor] = useState(false);
const [size, setSize] = useState('medium');
const [reptile, setReptile] = useState('alligator');

فعال‌کردن چرخه حیات کامپوننت‌ها با هوک در React

یکی دیگر از مشکلات استفاده از کامپوننت‌های تابع، نبود روش‌های چرخه حیات (Lifecycle) برای آن‌هاست. این در حالی است که بخش دیگری از قابلیت‌های هوک اضافه‌شدن «useEffect» است. useEffect ترکیبی است از componentDidUpdate و componentDidMount و componentWillUnmount. به‌عبارت‌دیگر، useEffect بعد از رندر اولیه و هر رندر دیگری که بعداً اتفاق می‌افتد، فعال می‌شود.

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

یکی از این عوارض جانبی، ارسال درخواست شبکه و بعد به‌روزرسانی State با مقداری است که برگردانده می‌شود. در مثال زیر، با «setTimeout» اتصال شبکه بسیار کُند را شبیه‌سازی می‌کنیم. درضمن، پیامی را هم تا زمانی که کاربر باید منتظر باشد، نشان می‌دهیم:

import React, { useEffect, useState } from "react";
import { render } from "react-dom";

function EffectedFn() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 1000 * 10);
  });

  return (
    <div>
      {loading && <span>Loading...</span>}
      {!loading && <span>All Done!</span>}
    </div>
  );
}

const container = document.createElement("div");
document.body.appendChild(container);
render(<EffectedFn />, container);

نکته جذاب درباره useEffect این است که برخلاف componentDidMount و componentDidUpdate، مرورگر را بلاک نمی‌کند؛ بنابراین، می‌توانید مطمئن باشید که محتواهایتان به‌صورت ریسپانسیو و سریع به کاربران نشان داده می‌شود.

شایان ذکر است که برای بهبود عملکرد هوک در React، به‌خصوص موقع کار با متغیرهای چندحالته (Multiple State)، می‌توانید به useEffect بگویید که فقط وقتی فعال شود که مقدار خاصی تغییر داده می‌شود. برای این کار، باید از کدهای زیر استفاده کنید:

useEffect(() => {
  setTimeout(() => {
    setLoading(false);
  }, 1000 * 10);
}, [loading]);

جمع‌بندی

اگر از ردوبدل‌کردن توابع بین کلاس‌ها، به‌ویژه هنگام نیاز به پشتیبانی از State و Lifecycle خسته شده‌اید، از هوک در ری‌اکت می‌توانید کمک بگیرید تا کارتان را به‌مراتب راحت‌تر کنید. بخش جذاب ماجرا این‌جاست که می‌توانید خودتان هوک‌های منحصربه‌فردی را توسعه دهید و نیز از مجموعه وسیع هوک‌هایی استفاده کنید که توسعه‌دهندگان React ایجاد کرده‌اند.

سؤالات متداول

۱. کدام نسخه‌های React شامل هوک‌ها هستند؟

هوک‌ها از نسخه 16.8.0 ری‌اکت به آن اضافه شدند و در‌حال‌حاضر، در نسخه‌های زیر عملکرد پایداری دارند:

  • React DOM
  • React Native
  • React DOM Server
  • React Test Renderer
  • React Shallow Renderer

۲. آیا در نسخه‌های جدیدتر React، استفاده از هوک ضروری خواهد بود؟

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

۳. آیا برای اضافه‌کردن هوک به کدها، باید همه توابع قبلی را به‌روزرسانی کنیم؟

خیر، هوک‌ها با تمام قوانین و عملکردهای قبلی سازگار‌ند؛ به‌همین‌دلیل، وقتی آن‌ها را به کدهایتان اضافه می‌کنید، نیازی نیست که کدهای قبلی را به‌روزرسانی کنید.

۴. برای اضافه‌کردن هوک‌ها، بهتر است کلاس‌های قبلی را هم به هوک تبدیل کنیم؟

خیر، پیشنهاد ما این است که از هوک‌ها فقط برای نوشتن کامپوننت‌های جدید استفاده کنید و کاری به کلاس‌های قبلی نداشته باشید؛ مگر وقتی‌ که به‌دلایل دیگر لازم است کلاس‌های قبلی را بازنویسی کنید (مثلاً برای دیباگ‌کردن). در این صورت، بهتر است که آن کلاس‌ها را هم در قالب هوک بنویسید.

۵. آیا می‌توانیم هوک‌ها را داخل کلاس‌ها بنویسیم؟

خیر، نمی‌توانید یک هوک را داخل کامپوننت‌های یک کلاس بنویسید؛ اما می‌توانید کلاس‌ها و کامپوننت‌های توابع را با هوک‌ها در یک درخت واحد ترکیب کنید.

  • با خدمات ابری پارس آشنا شوید

    اولین ارائه‌دهنده خدمات رایانش ابری در ایران هستیم

    ابر سرور

    ابر سرور

    با ابرسرورها می‌توانید سرور با سیستم‌عامل دلخواه خود را در چند دقیقه انتخاب و نصب نموده و آزادانه منابع سخت‌افزاری که در نظر دارید را، در زمان دلخواه به سرور خود بیافزایید و تنها برای منابع مورد نیاز سرور، هزینه پرداخت نمایید.

    هایبرید سرور

    هایبرید سرور

    هایبرید سرورها نسل جدید و پیشرفته سرورهای اختصاصی هستند که با پنل قدرتمند ابری ارائه می‌شوند. در هایبرید سرورها علاوه بر ارائه سخت‌افزار مستقل، امکانات سخت‌افزاری ویژه‌ای نیز در نظر گرفته شده است.

    ماکرو سرور

    ماکرو سرور

    ماکرو سرور محصولی ویژه است که برای دریافت بالاترین کیفیت سخت‌افزاری طراحی شده است. در شرایطی که نیازمند سخت‌افزاری قدرتمند برای سرور خود هستید، ماکرو سرورها منابع سخت‌افزاری مورد نیاز را برای شما فراهم می‌کنند.

    هاست ابری

    هاست ابری

    در هاست ابری برخلاف یک هاست اشتراکی، سایت‌های پر بازدید نیز بسادگی می‌توانند از خدمات میزبانی استفاده کنند، بدون آنکه درگیر دغدغه‌های مدیریت سرور شوند. همواره تنها برای آن میزان از منابع سخت‌افزاری که نیاز دارید هزینه می‌پردازید و دیگر نیازی به پرداخت هزینه‌های غیر موجه، در ابتدای فعالیت وب سایت خود، نخواهید داشت.

    هاست دانلود

    هاست دانلود

    سیاری از مدیران سایت‌های دانلود و یا سایت‌هایی که با ترافیک بالایی برای به اشتراک‌گذاری فایل‌های خود روبرو هستند، عمدتا با مشکلاتی مانند هزینه‌های گزاف زیرساختی و یا مصرف بالای منابع سخت‌افزاری روبرو می‌شوند. از همین رو پارس‌پک با معرفی فضای هاست دانلود برای این دسته از کاربران، محصول مناسبی را پیش‌بینی نموده است.

    مطالعه این مطالب نیز پیشنهاد می‌شود

    مقالات و نظرات اعضای تیم ما درباره تکنولوژی، روزهای کاری و چیزای دیگر…

  • کلیه حقوق برای پارس پک محفوظ می باشد.

    Copyright © 2022 ParsPack Cloud Computing Technology ® , All Rights Reserved.