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

یکی از چیزهای جالب در مورد ویژگی های Hook این است که به شما اجازه می دهد از React بدون کلاس استفاده کنید. این به نوبه خود به ساده‌سازی پایگاه کد شما کمک می‌کند و به شما کمک می‌کند کدهای پاک‌تر و بصری‌تر بنویسید.

در این مقاله یاد خواهید گرفت که چگونه از Hook های رایج در پروژه خود استفاده کنید.

مزایای React Hooks

بیایید برخی از دلایلی که ممکن است بخواهید از Hooks در پروژه خود استفاده کنید را مرور می کنیم:

آسان برای استفاده و درک: با Hooks، می توانید کدهای ساده تری بنویسید. این دستورات Hook را فقط می توان در داخل یک جزء کاربردی نوشت.

کد قابل استفاده مجدد: قلاب ها به شما این امکان را می دهند که از یک منطق خاص استفاده شده در یک مؤلفه در چندین مؤلفه دیگر استفاده مجدد کنید.

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

انواع مختلف React Hooks

آپشن های React Hook انواع مختلفی دارند، از useState ، useEffect ، useRef ، useReducer و غیره.

React Hook Rules

در مورد ویژگی های React Hook چند قانون مهم وجود دارد که باید به شدت رعایت شوند. بیایید در بخش های بعدی به آنها بپردازیم.

هوک ها باید در داخل تابع React فراخوانی شوند

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

این قانون اول اساساً مشخص می کند که یک جزء Hook نباید در یک جزء کلاس، بلکه در یک جزء تابعی یافت شود.

در اینجا روش اشتباه اجرای ویژگی Hook وجود دارد:

 import React, { Component } from 'react'; import React, {useState} from react; class App extends Component { const [count, setCount] = useState(0); render() { return ( <div> <h1>Hello, I am a Class Component!</h1> </div> ); } } export default App;

و در اینجا روش صحیح پیاده سازی ویژگی Hook است:

 import React, { useState } from 'react'; function App() { const [userName, setUsername] = useState(''); }; return ( Your JSX code goes in here.....); }; export default App;

مثال کد بالا روش مناسب استفاده از ویژگی Hook را نشان می دهد.

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

قلاب ها را فقط می توان در سطح بالای یک جزء فراخوانی کرد

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

با استفاده از کد بخش قبلی به عنوان مثال، می توانید بلافاصله بعد از function App () ببینید.

مورد بعدی که می آید دستور Hook است – در آن مثال از useState Hook استفاده کردیم. این همان چیزی است که قانون دوم در مورد آن است.

قلاب ها را نمی توان در یک دستور شرطی استفاده کرد

ما انواع مختلفی از گزاره‌های شرطی/رندر داریم که از if ، else ، و غیره متغیر است.

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

می‌توانید Hooks را به صورت مشروط در یک مؤلفه عملکردی اجرا کنید، اما برای اینکه این کار کار کند، این شرط باید با منطق سطح بالا تعیین شود و نباید در هیچ بلوک یا مؤلفه دیگری قرار گیرد.

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

به عنوان مثال:

 import React, { useState, useEffect } from 'react'; function ConditionalEffectComponent() { const [isMounted, setIsMounted] = useState(false); useEffect(() => { if (isMounted) { // Perform some effect when the component is mounted console.log('Component mounted'); } }, [isMounted]); // Dependency array ensures effect runs when isMounted changes return ( <div> <button onClick={() => setIsMounted(!isMounted)}> {isMounted ? 'Unmount' : 'Mount'} </button> </div> ); } export default ConditionalEffectComponent;

از مثال بالا، قلاب useEffect به صورت مشروط و وابسته به مقدار متغیر isMounted state اجرا می شود.

با کلیک بر روی دکمه، مقدار isMounted تغییر می کند، که بسته به مقدار به روز شده، افکت را فعال یا غیرفعال می کند.

این مناسب تلقی می شود زیرا Hook در بالاترین سطح جزء فراخوانی می شود و شرایط آن توسط منطق فراگیر درون مولفه تعیین می شود.

نحوه استفاده از useState Hook

React useState Hook شما را قادر می سازد تا متغیرهای حالت را در اجزای تابعی داشته باشید.

برای استفاده از حالت Hook، ابتدا باید آن را با استفاده از دستور import وارد پروژه خود کنید.

نحوه کار useState این است که دو متغیر به ما می دهد. متغیر اول به عنوان مقدار حالت شناخته می شود و متغیر دوم تابعی است که برای به روز رسانی حالت استفاده می شود.

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

 import './App.css' import React, { useState } from 'react'; function App() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } export default App;

از مثال کد بالا، می بینید که حالت Hook در یک جزء تابعی و نه یک جزء کلاس استفاده شده است.

count و setCount دو متغیر حالت Hook هستند که count مقدار فعلی حالت است و setCount برای به روز رسانی مقدار حالت استفاده می شود. پس ، هر زمان که روی دکمه کلیک شود، setCount مقدار count را به روز می کند.

نحوه استفاده از useEffect Hook

قلاب useEffect در React مانند یک ابزار مفید برای اجزای کاربردی است. این به مدیریت کارهایی کمک می کند که مستقیماً با نمایش موارد روی صفحه مرتبط نیستند، مانند واکشی داده ها از اینترنت، بازیابی داده ها از نقاط پایانی API یا تنظیم تایمرها. می توان از آن برای به روز رسانی مولفه ها حتی پس از نمایش آنها استفاده کرد و برنامه شما را پویاتر می کند.

در اینجا یک مثال اساسی از نحوه استفاده از useEffect برای واکشی داده ها از نقطه پایانی API آورده شده است:

 import React, { useState, useEffect } from 'react'; function MyComponent() { const [data, setData] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await fetch('https://api.example.com/data'); const jsonData = await response.json(); setData(jsonData); } catch (error) { console.error('Error fetching data:', error); } }; fetchData(); // Call the fetchData function when the component mounts or updates // Cleanup function (optional) to handle unsubscriptions or resource cleanup return () => { // Cleanup logic here, if needed }; }, []); // Empty dependency array means the effect runs only once after the initial render return ( <div> {/* Render the fetched data */} {data && ( <ul> {data.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> )} </div> ); } export default MyComponent;

در مثال کد بالا، MyComponent یک مؤلفه کاربردی است که از قلاب های React، به طور خاص useState و useEffect برای مدیریت وضعیت و اجرای عوارض جانبی استفاده می کند. قلاب useState برای مقداردهی اولیه یک متغیر حالت به نام data استفاده می شود. این متغیر داده های بازیابی شده از یک نقطه پایانی API را ذخیره می کند.

قلاب useEffect برای درخواست داده از نقطه پایانی API به محض ارائه اولیه مؤلفه استفاده می شود. در useEffect ، یک تابع ناهمزمان fetchData برای واکشی داده‌های JSON از نقطه پایانی API مشخص شده با استفاده از fetch API تعریف می‌شود.

اگر واکشی داده با موفقیت انجام شود، داده های JSON برگشتی در متغیر وضعیت داده با استفاده از تابع setData ارائه شده توسط قلاب useState ذخیره می شود.

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

در JSX جزء، داده های واکشی شده به صورت مشروط ارائه می شوند. اگر داده ها تهی نباشند، یک فهرست <ul> با استفاده از موارد استخراج شده از آرایه داده ها با استفاده از نقشه تولید می شود.

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

نتیجه

به عنوان یک توسعه دهنده، React Hooks یک ابزار بسیار مفید و قدرتمند برای اجزای کاربردی است که کار شما را آسان می کند.

من معتقدم که در این مرحله شما اکنون می دانید که React Hook چیست و چگونه از محبوب ترین ها استفاده کنید.

با تشکر برای خواندن، و کد نویسی مبارک!

خبرکاو