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

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

قلاب در واکنش چیست؟

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

نکته: قلاب را نمی توان در کلاس استفاده کرد!

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

چگونه قلاب را در کد React جاسازی کنم؟

برای افزودن هوک به کد React می توانید از کد زیر استفاده کنید. توجه داشته باشید که در این کدها باید نسخه React را مشخص کنید:

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

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

قوانین کلی برای نوشتن قلاب

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

• قلاب ها باید با کلمه “استفاده” شروع شوند.
• قلاب ها را فقط می توان از اجزای کاربردی و قلاب های سفارشی فراخوانی کرد. این ویژگی را می توان یک مزیت مهم در نظر گرفت. زیرا منطق گروهی را بین تمام اجزای شما ایجاد می کند.
• شما فقط باید از hook در سطح بالای کد خود استفاده کنید، نه در داخل حلقه های شرطی یا توابع تودرتو که در اجزای عملکردی دارید. این اطمینان حاصل می کند که قلاب ها به همان ترتیب و بر اساس هر تصویر فراخوانی می شوند.

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

وضعیت اجزا را با قلاب در جریان ارزیابی کنید

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

در کد زیر، یک جزء از تابع Stateful داریم که با هر کلیک، رنگی را که به طور تصادفی تنظیم می شود، تشخیص می دهد:

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

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

  function onClick() {
    const colors = [
      "#۰۰۸F68",
      "#۶DB65B",
      "#۴AAE9B",
      "#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 (یعنی بر خلاف مکانیزم جزء کلاس). به همین دلیل، یا باید خود شیء حالت را به صورت دستی ذخیره کنیم یا به روشی ساده تر، کافیست یکبار useState را فراخوانی کنیم تا هر یک از متغیرهای موجود در حالت خود را ردیابی کنیم:

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

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

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

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

یکی از این عوارض ارسال درخواست شبکه و سپس به روز رسانی وضعیت با مبلغ قابل بازگشت است. در مثال زیر، ما از “setTimeout” برای شبیه سازی یک اتصال شبکه بسیار کند استفاده می کنیم. همچنین در زمانی که کاربر باید منتظر بماند، پیامی را نمایش می دهیم:

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

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

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, ۱۰۰۰ * ۱۰);
  });

  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، به خصوص هنگام کار با متغیرهایی با چندین حالت، می‌توانید به useEffect بگویید فقط زمانی که مقدار خاصی تغییر می‌کند فعال شود. برای این کار باید از کد زیر استفاده کنید:

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

نتیجه

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

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

1 کدام نسخه از React شامل قلاب است؟

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

• به DOM پاسخ دهید
• React Native
• سرور DOM React
• React Test Renderer
• React Shallow Renderer

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

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

3. آیا برای افزودن قلاب به کد نیاز به آپدیت تمامی ویژگی های قبلی داریم؟

خیر، قلاب ها با تمام قوانین و شیوه های قبلی مطابقت دارند. به همین دلیل، وقتی آنها را به کد خود اضافه می کنید، نیازی به آپدیت کد قبلی ندارید.

4. برای افزودن هوک بهتر است کلاس های قبلی را به هوک تبدیل کنیم؟

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

5. آیا می توانیم داخل کلاس ها قلاب بنویسیم؟

نه، شما نمی توانید اجزای یک کلاس را قلاب کنید. اما می توانید کلاس ها و اجزای کاربردی را با قلاب ها در یک درخت ترکیب کنید.

{“@context”: “https://schema.org”، “@type”: “FAQPage”، “mainEntity”: [{
“@type”: “Question”,
“name”: “کدام نسخه‌های React شامل هوک‌ها هستند؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “هوک‌ها از نسخه ۱۶٫۸٫۰ ری‌اکت به آن اضافه شدند و در‌حال‌حاضر، در نسخه‌های زیر عملکرد پایداری دارند:

React DOM
React Native
React DOM Server
React Test Renderer
React Shallow Renderer”
}
},{
“@type”: “Question”,
“name”: “آیا در نسخه‌های جدیدتر React، استفاده از هوک ضروری خواهد بود؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “خیر، نکته مهم درباره هوک در React این است که تا وقتی خودتان نخواهید، هیچ الزامی برای استفاده از آن وجود ندارد. بنابراین، تا وقتی کار با کلاس‌ها را ترجیح دهید، با همان روش می‌توانید کار را پیش ببرید.”
}
},{
“@type”: “Question”,
“name”: “آیا برای اضافه‌کردن هوک به کدها، باید همه توابع قبلی را به‌روزرسانی کنیم؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “خیر، هوک‌ها با تمام قوانین و عملکردهای قبلی سازگار‌ند؛ به‌همین‌دلیل، وقتی آن‌ها را به کدهایتان اضافه می‌کنید، نیازی نیست که کدهای قبلی را به‌روزرسانی کنید.”
}
},{
“@type”: “Question”,
“name”: “برای اضافه‌کردن هوک‌ها، بهتر است کلاس‌های قبلی را هم به هوک تبدیل کنیم؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “خیر، پیشنهاد ما این است که از هوک‌ها فقط برای نوشتن کامپوننت‌های جدید استفاده کنید و کاری به کلاس‌های قبلی نداشته باشید؛ مگر وقتی‌ که به‌دلایل دیگر لازم است کلاس‌های قبلی را بازنویسی کنید (مثلاً برای دیباگ‌کردن). در این صورت، بهتر است که آن کلاس‌ها را هم در قالب هوک بنویسید.”
}
},{
“@type”: “Question”,
“name”: “آیا می‌توانیم هوک‌ها را داخل کلاس‌ها بنویسیم؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “خیر، نمی‌توانید یک هوک را داخل کامپوننت‌های یک کلاس بنویسید؛ اما می‌توانید کلاس‌ها و کامپوننت‌های توابع را با هوک‌ها در یک درخت واحد ترکیب کنید.”
}
}]
}

هوک در Reaction چه می نویسد؟ آموزش کامل پیاده سازی Hook در React برای اولین بار در پارسوپک. به نظر می رسد.