توسعه وب یک زمینه محبوب در صنعت فناوری است. این شامل ساختن نرم افزار وب با استفاده از HTML، CSS، و جاوا اسکریپت است – گاهی اوقات با کمک چارچوب ها و کتابخانه های مختلف.

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

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

آنچه را پوشش خواهیم داد:

پیش نیازها:

شروع به کار

هوک چیست؟

انواع React Hooks

قلاب های مدیریت دولتی

قلاب های اثر

Ref Hook

قلاب های عملکرد

هوک زمینه

قلاب انتقال

چند قلاب تصادفی

نتیجه گیری

پیش نیازها:

شما باید اصول جاوا اسکریپت را بدانید.

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

شروع به کار

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

خوب، نگران نباشید - در این راهنما، من هر قلاب اصلی را می‌شکنم تا بتوانید ببینید که چگونه با هم هماهنگ می‌شوند. ما همچنین بحث خواهیم کرد که کدام یک را بیشتر در مقایسه با کمتر استفاده می کنید.

در پایان این مقاله، نقشه ای جامع از قلاب های React و کاربردهای عملی آن ها خواهید داشت.

هوک چیست؟

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

هوک ها در React به طور مشابه کار می کنند، اما برای مدیریت وضعیت در اجزای عملکردی طراحی شده اند. به جای اعلان دستی یک متغیر، قلاب هایی مانند useState راهی برای اعلام مقادیر stateful به همراه یک تابع تنظیم کننده برای به روز رسانی آن حالت به ما می دهند.

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

 import React, { useState } from 'react' ; function Counter ( ) { const [count, setCount] = useState( 0 ); // Initialize state and state updater return ( < div > < p > You clicked {count} times </ p > < button onClick = {() => setCount(count + 1)}>Click me </ button > </ div > ); }

در این کد، من از قلاب useState برای اعلام یک حالت به نام count استفاده می کنم و مقدار اولیه آن را 0 می کنم. تابع setCount به ما اجازه می دهد تا این حالت را به روز کنیم. هر بار که روی دکمه کلیک می‌شود، setCount برای افزایش count 1 استفاده می‌کنیم. زمانی که وضعیت به‌روزرسانی می‌شود، React مؤلفه را دوباره رندر می‌دهد تا تغییر را منعکس کند.

برخلاف اعلام let count = 0 ، استفاده از useState به React اجازه می دهد تا وضعیت را در رندرها به خاطر بسپارد و اطمینان حاصل کند که رابط کاربری به درستی به روز می شود.

انواع React Hooks

برای آسان‌تر کردن کارها، می‌توانید قلاب‌های React را به‌عنوان هشت دسته اصلی در نظر بگیرید:

قلاب های مدیریت ایالت - برای رسیدگی به وضعیت.

افکت هوک – برای عوارض جانبی.

Ref Hooks – برای ارجاع به مقادیر جاوا اسکریپت یا عناصر DOM.

قلاب های عملکرد - برای بهینه سازی عمل کرد.

Context Hooks – برای دسترسی به زمینه React.

قلاب های انتقال - برای تجربه های کاربر روان تر.

برخی از قلاب های تصادفی - قلاب های ویژه.

New Hooks (React 19) – ابزارهای پیشرفته ای که در آخرین نسخه React معرفی شده اند.

در React نیز می توانید قلاب های سفارشی برای موارد استفاده مختلف بسازید. هر هوک با کلمه کلیدی use شروع می شود – حتی قلاب های سفارشی نیز با این ساختار شروع می شوند. این کلمه کلیدی برای Hooks در React رزرو شده است.

بیایید این قلاب ها را با جزئیات تحلیل کنیم.

قلاب های مدیریت دولتی

1. useState

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

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

 import React, { useState } from 'react' ; function Counter ( ) { const [count, setCount] = useState( 0 ); // Initialize state and state updater return ( < div > < p > You clicked {count} times </ p > < button onClick = {() => setCount(count + 1)}>Click me </ button > </ div > ); }

توضیح کد : useState حالت (count) را مقداردهی اولیه می کند و یک تابع ( setCount ) برای به روز رسانی آن حالت ارائه می دهد.

2. useReducer

وقتی useState کافی نیست، useReducer وارد عمل می شود. این قلاب برای مدیریت منطق پیچیده حالت عالی است.

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

به آن به عنوان یک ارتقاء برای مدیریت سناریوهای پیچیده تر فکر کنید. در اینجا یک مثال است:

 import React, { useReducer } from 'react' ; const initialState = { count : 0 }; function reducer ( state, action ) { switch (action.type) { case 'increment' : return { count : state.count + 1 }; case 'decrement' : return { count : state.count - 1 }; default : return state; } } function Counter ( ) { const [state, dispatch] = useReducer(reducer, initialState); return ( < div > < p > Count: {state.count} </ p > < button onClick = {() => dispatch({ type: 'increment' })}>+ </ button > < button onClick = {() => dispatch({ type: 'decrement' })}>- </ button > </ div > ); }

توضیح کد : useReducer برای مدیریت به‌روزرسانی‌های وضعیت پیچیده، مانند مدیریت چندین اقدام مرتبط، مفید است.

3. useSyncExternalStore
useSyncExternalStore یک قلاب برای ادغام فروشگاه های غیر React در کامپوننت های React شما است.

اگرچه معمولاً مورد استفاده قرار نمی گیرد، اما اگر کتابخانه مدیریت دولتی خود را از ابتدا بسازید بسیار مهم است.

 import React, { useSyncExternalStore } from 'react' ; const externalStore = { subscribe : ( callback ) => { const interval = setInterval (callback, 1000 ); return () => clearInterval (interval); }, getSnapshot : () => new Date ().toLocaleTimeString(), }; function Clock ( ) { const time = useSyncExternalStore(externalStore.subscribe, externalStore.getSnapshot); return < div > {time} </ div > ; }

توضیح کد : useSyncExternalStore به شما امکان می دهد کامپوننت React خود را به منابع داده غیر React مانند فروشگاه های جهانی متصل کنید.

قلاب های اثر

1. useEffect
قلاب useEffect عوارض جانبی روی اجزای شما دارد. چه در حال تعامل با DOM باشید و چه در حال واکشی داده ها باشید، useEffect گزینه شم است. به طور پیش فرض بعد از هر رندر اجرا می شود، اما می توانید رفتار آن را با استفاده از یک آرایه وابستگی سفارشی کنید.

اما باید از ابزارها یا کتابخانه های تخصصی تری مانند React Query برای عوارض جانبی مبتنی بر رویداد یا رندر استفاده کنید.

 import React, { useState, useEffect } from 'react' ; function DataFetcher ( ) { const [data, setData] = useState( null ); useEffect( () => { fetch( 'https://api.example.com/data' ) .then( ( response ) => response.json()) .then( ( data ) => setData(data)); }, []); // Empty dependency array means it runs once on mount return < div > {data ? JSON.stringify(data) : 'Loading...'} </ div > ; }

توضیح کد : قلاب useEffect هنگام نصب کامپوننت، داده ها را واکشی می کند. وقتی آرایه خالی باشد افکت فقط یک بار اجرا می شود.

2. useLayoutEffect
useLayoutEffect مشابه useEffect کار می کند اما بلافاصله پس از به روز رسانی DOM به صورت همزمان اجرا می شود. برای عملیاتی استفاده می‌شود که باید قبل از اینکه مرورگر رابط کاربری را نقاشی کند، مانند عناصر اندازه‌گیری، انجام شود.

از آن کم استفاده کنید، زیرا کمتر از useEffect اجرا می شود. در اینجا یک مثال است:

 import React, { useLayoutEffect, useRef } from 'react' ; function Measure ( ) { const divRef = useRef(); useLayoutEffect( () => { console .log(divRef.current.getBoundingClientRect()); }, []); return < div ref = {divRef} > Measure me! </ div > ; }

توضیح کد : useLayoutEffect عناصر DOM را قبل از رنگ آمیزی مجدد مرورگر اندازه گیری می کند.

3. useInsertionEffect
به طور انحصاری برای توسعه دهندگان کتابخانه CSS-in-JS، useInsertionEffect قبل از useEffect و useLayoutEffect اجرا می شود تا اطمینان حاصل شود که سبک های CSS به درستی درج شده اند. طاقچه است، اما برای حفظ یکپارچگی سبک در برنامه های پیچیده بسیار مهم است.

 import React, { useInsertionEffect, useState } from 'react' ; function StyledComponent ( ) { const [text, setText] = useState( 'Hover over me!' ); useInsertionEffect( () => { const style = document .createElement( 'style' ); style.textContent = ` .hovered { color: red; font-size: 24px; transition: color 0.3s ease; } ` ; document .head.appendChild(style); return () => { document .head.removeChild(style); }; }, []); return ( < div className = "hovered" onMouseEnter = {() => setText('You hovered over me!')} onMouseLeave={() => setText('Hover over me!')} > {text} </ div > ); }

توضیح کد : از قلاب useInsertionEffect برای تزریق استایل ها به DOM در زمان اجرا استفاده می شود و استایل کامپوننت را پویا می کند و فقط به آن مولفه محدود می شود.

Ref Hook

1. useRef
useRef به شما امکان می دهد تا مقادیر را در سراسر رندرها بدون ایجاد رندر مجدد حفظ کنید. این برای ذخیره مقادیر قابل تغییر یا ارجاع به عناصر DOM عالی است. چه در حال مدیریت فواصل زمانی باشید، چه یک گره DOM را ذخیره کنید یا وضعیت قبلی را پیگیری کنید، useRef شما را تحت پوشش قرار می دهد.

 import React, { useRef } from 'react' ; function FocusInput ( ) { const inputRef = useRef( null ); const handleFocus = () => { inputRef.current.focus(); }; return ( < div > < input ref = {inputRef} type = "text" /> < button onClick = {handleFocus} > Focus Input </ button > </ div > ); }

توضیح کد: این کد React از useRef برای ایجاد یک مرجع به یک عنصر ورودی استفاده می کند. هنگامی که دکمه کلیک می شود، تابع handleFocus فیلد ورودی را فعال می کند تا با استفاده از inputRef.current.focus() فوکوس شود.

قلاب های عملکرد

1. useMemo
برای بهینه سازی عملکرد، useMemo دوست شم است. نتایج محاسبات گران قیمت را در حافظه پنهان نگه می دارد و تنها زمانی که وابستگی ها تغییر می کند دوباره محاسبه می شود. این می تواند به طور قابل توجهی عملکرد را بهبود بخشد، به خصوص در سناریوهایی که شامل محاسبات سنگین است.

 import React, { useState, useMemo } from 'react' ; function ExpensiveCalculation ( ) { const [count, setCount] = useState( 0 ); const expensiveComputation = useMemo( () => { return count * 100 ; }, [count]); return ( < div > < p > Expensive Computation: {expensiveComputation} </ p > < button onClick = {() => setCount(count + 1)}>Increase Count </ button > </ div > ); }

توضیح کد: این کد React از useMemo برای بهینه سازی یک محاسبه گران قیمت استفاده می کند ( count * 100 ). محاسبه فقط زمانی که count تغییر می کند دوباره اجرا می شود. count افزایش‌های دکمه، باعث به‌روزرسانی رابط کاربری با نتیجه جدید می‌شود.

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

 import React, { useState, useCallback } from 'react' ; function Child ( { onClick } ) { return < button onClick = {onClick} > Click me </ button > ; } function Parent ( ) { const [count, setCount] = useState( 0 ); const handleClick = useCallback( () => { console .log( 'Clicked' ); }, []); return ( < div > < Child onClick = {handleClick} /> < p > Count: {count} </ p > < button onClick = {() => setCount(count + 1)}>Increase Count </ button > </ div > ); }

توضیح کد: این کد React از useCallback برای به خاطر سپردن تابع handleClick استفاده می کند و از ایجاد مجدد در هر رندر جلوگیری می کند. مؤلفه Child از این عملکرد برای دکمه خود استفاده می کند. به‌روزرسانی‌های والدین به‌طور مستقل count .

هوک زمینه

1. useContext
قلاب useContext دسترسی به مقادیر زمینه را ساده می کند. این مقدار را از نزدیکترین ارائه دهنده زمینه می خواند و به طور یکپارچه در بین اجزای تو در تو کار می کند. این امر مدیریت وضعیت ها یا مضامین جهانی را آسان تر می کند.

 import React, { useContext, createContext } from 'react' ; const ThemeContext = createContext( 'light' ); function ThemedButton ( ) { const theme = useContext(ThemeContext); return < button > {theme} </ button > ; } function App ( ) { return ( < ThemeContext.Provider value = "dark" > < ThemedButton /> </ ThemeContext.Provider > ); }

توضیح کد : این کد React از createContext برای ایجاد یک ThemeContext استفاده می کند. useContext به مقدار متن دسترسی پیدا می کند و آن را در دکمه نمایش می دهد. مؤلفه App «تاریک» را به عنوان تم به ThemedButton ارائه می‌کند.

قلاب انتقال

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

 import React, { useState, useTransition } from 'react' ; function TransitionComponent ( ) { const [count, setCount] = useState( 0 ); const [isPending, startTransition] = useTransition(); const handleClick = () => { startTransition( () => { setCount( ( prevCount ) => prevCount + 1 ); }); }; return ( < div > < button onClick = {handleClick} > Increase Count </ button > {isPending ? < p > Loading... </ p > : < p > Count: {count} </ p > } </ div > ); }

توضیح کد: این کد از useTransition برای افزایش count بدون مسدود کردن رابط کاربری استفاده می کند. در حالی که وضعیت به روز می شود، isPending "در حال بارگیری..." را نشان می دهد. با کلیک بر روی دکمه، یک انتقال حالت صاف و بدون انسداد ایجاد می شود.

چند قلاب تصادفی

1. useDeferredValue DeferredValue
مشابه useTransition ، useDeferredValue به تعویق به‌روزرسانی‌های وضعیت کمک می‌کند تا برنامه پاسخگو باشد. به‌روزرسانی‌ها را برنامه‌ریزی می‌کند تا در زمان بهینه انجام شوند و تجربه کاربر را بدون مداخله دستی افزایش می‌دهد.

 import React, { useState, useDeferredValue } from 'react' ; function DeferredComponent ( ) { const [value, setValue] = useState( '' ); const deferredValue = useDeferredValue(value); return ( < div > < input value = {value} onChange = {(e) => setValue(e.target.value)} /> < p > Deferred Value: {deferredValue} </ p > </ div > ); }

توضیح کد : useDeferredValue به‌روزرسانی deferredValue را به تأخیر می‌اندازد تا اطمینان حاصل شود که رابط کاربری پاسخگو باقی می‌ماند.

2. useDebugValue
useDebugValue یک قلاب در درجه اول برای اشکال زدایی است. این به شما امکان می‌دهد قلاب‌های سفارشی را در React DevTools برچسب‌گذاری کنید و ردیابی و اشکال‌زدایی قلاب‌های خود را آسان‌تر می‌کند.

 import React, { useDebugValue, useState } from 'react' ; function useCustomHook ( value ) { useDebugValue(value ? "Has Value" : "No Value" ); return value; } function DebugComponent ( ) { const [value, setValue] = useState( '' ); const customValue = useCustomHook(value); return ( < input value = {value} onChange = {(e) => setValue(e.target.value)} /> Value: {customValue} ); }

توضیح کد: این کد از useDebugValue برای نشان دادن "Has Value" یا "No Value" در React DevTools بر اساس value استفاده می کند. useCustomHook در DebugComponent برای ردیابی وضعیت ورودی و نمایش آن به صورت پویا استفاده می شود.

3. useId
useId شناسه‌های منحصربه‌فردی را برای عناصر ایجاد می‌کند و اطمینان می‌دهد که ورودی‌های فرم و برچسب‌ها به درستی و بدون تداخل به هم مرتبط هستند. این به ویژه در هنگام برخورد با عناصر تکراری پویا مفید است.

 import React, { useId } from 'react' ; function FormComponent ( ) { const id = useId(); return ( < div > < label htmlFor = {id} > Name: </ label > < input id = {id} type = "text" /> </ div > ); }

توضیح کد : useId تضمین می کند که عناصر فرم دارای شناسه های منحصر به فرد هستند و از تضادهای احتمالی جلوگیری می کند.

نتیجه گیری

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

برای غواصی عمیق تر و تمرین عملی، React Bootcamp جامع من را تحلیل کنید، جایی که چالش های تعاملی، ویدیوها و برگه های تقلب را برای تقویت دانش خود خواهید یافت.

خبرکاو