فریم ورک react از فریم ورک های جاوا اسکریپت می باشد که در مقالات قبلی در مورد آن صحبت کردیم در این مقاله قصد داریم در مورد ویژگی جدید hooks در react js و اصلا اینکه چرا به وجود آمد صحبت کنیم و سه تا از هوک های پایه ی react را بررسی کنیم که شامل state hook و effect hook و context hook می شوند و قوانین هوک ها را شرح دهیم ، ویژگی جدید ریکت که در موردش توضیح خواهیم داد موجب افزایش لذت کد نویسی با ریکت شده است.
آنچه در این نوشته خواهیم داشت
Hooks در React چیست؟
state hook در react چیست ؟
اعلام متغیرهای حالت چندگانه
Effect hook چیست؟
context hook چیست؟
قوانین Hooks
جمع بندی
Hooks در React چیست؟
hooks ویژگی جدیدی در React 16.8 هستند آنها به شما اجازه می دهند بدون نوشتن class، از state و سایر ویژگی های React استفاده کنید. با استفاده از hook میتوان در کامپوننت فانکشنال ریکت به جزstate از life cycle متدها هم بهره برد و کدهای قابل استفاده ی مجدد نوشت و مقادیر را از زمینه global به یک کامپوننت انتقال داد ، شما با استفاده از hook می توانید با فانکشن و بدون استفاده از کلاس‌ها کامپوننت‌هایتان را بنویسید.
state hook در react چیست ؟
این مثال یک شمارنده ارائه می دهد. وقتی روی شمارشگر کلیک می کنید ، مقدار آن یک واحد افزایش می یابد:
;’import React, { useState } from ‘react
}()function Example
;(Declare a new state variable, which we’ll call “count” const [count, setCount] = useState(0//
)return
<div>
<p>You clicked {count} times</p>
<{(button ={() => setCount(count + 1>
Click me
<button/>
<div/>
;(
{
در اینجا، useStateیک hook است. ما این تابع را درون یک تابع کامپوننت صدا می زنیم تا بعضی از state های محلی را به آن بیفزاییم. این state را React بین رندرهای مجدد کامپوننت حفظ می کند. useStateیک جفت برمی گرداند: یکی مقدار state فعلی و دیگری تابعی که به شما امکان می دهد مقدار state را به روز کنید. می توانید این عملکرد را از طریق کنترل کننده رویداد یا مکان دیگری فراخوانی کنید. شبیه کلاس this.setState است ، با وجودیکه state قدیم و جدید را با هم ترکیب نمی کند.
Use state فقط یک پارامتر را به عنوان مقدار ابتدایی state گرفته است . در مثال بالا مقدار ابتدایی صفر است که شمارنده ما از صفر شروع می شود. علی رغم this.state ، این حالت در اینجا لازم نیست که یک object شی باشد ،گرچه اگر بخواهید می تواند باشد. مقدار state اولیه فقط در اولین رندر مورد استفاده قرار می گیرد.
اعلام متغیرهای حالت چندگانه
از State Hook بیش از یک مرتبه در یک componentاستفاده کنید:
}()function ExampleWithManyStates
!Declare multiple state variables//
;(const [age, setAge] = useState(42
;(‘const [fruit, setFruit] = useState(‘banana
;([{‘const [todos, setTodos] = useState([{ text: ‘Learn Hooks
…//
{
Array destructuring اجازه می دهد تا به نام های دیگر مقدار بازگشتی از use state را مشخص کنیم که موجب افزایش خوانایی کد می شود.
Effect hook چیست؟
شما احتمالاً قبلاً واکشی داده ها ، اشتراک ها یا تغییر دستی DOM را در component ریکت اجرا کرده اید. ما به این عملیات side effect می گوییم (یا به طور خلاصه افکت) زیرا آنها می توانند بر بقیه ی کامپوننت ها تأثیر بگذارند و در زمان اجرای ابتدایی کامپوننت انجام نمی شوند.
useEffectامکان استفاده از side effect دریک کامپوننت تابعی را اضافه می کند.
هدف این است که بهره بردن از componentDidMount، componentDidUpdate، و componentWillUnmount در کلاسهای React معادل سازی شود.
به عنوان مثال ، component ریکت عنوان صفحه را پس از به روزرسانی DOM تنظیم می کند:
;’import React, { useState, useEffect } from ‘react
}() function Example
;(const [count, setCount] = useState(0
Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API //
; ({ ;`document.title = `You clicked ${count} times
) return
<div>
<p>You clicked {count} times</p>
<{(button ={() => setCount(count + 1>
Click me
<button/>
<div/>
;(
{
وقتی useEffect راصدا میزنید به React می گویید که موجب اجرای تابع افکت خود پس از تغییر سریع تغییرات در DOM ، می شود. Effect ها درون components اعلام می شوند ، بنابراین به propها و state آن دسترسی دارند. به صورت فرضی، React موجب اجرای افکت ها بعد از هر بار صدا زدن از جمله فراخوانی اول می شود. (ما در مورد مقایسه این با چرخه های عمر کلاس در استفاده از Effect Hook بیشتر صحبت خواهیم کرد .
افکت ها همچنین می توانند به صورت اختیاری نحوه حذف کردن بعد از آنها را با بازگرداندن یک تابع مشخص کنند. به عنوان مثال ، این component از یک effect برای اشتراک در وضعیت آنلاین یک دوست استفاده می کند و در function برگشتی از آن effect پاک می شود:
;’import React, { useState, useEffect } from ‘react
}(function FriendStatus(props
;(const [isOnline, setIsOnline] = useState(null
}(function handleStatusChange(status
;(setIsOnline(status.isOnline
{
useEffect(() => { ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); return () => {
; { ; ( ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange
} (if (isOnline === null
; ‘…return ‘Loading
{
; ‘return isOnline ? ‘Online’ : ‘Offline
{
در این مثال ، ChatAPIهنگام برداشتن کامپوننت، و همینطور قبل از اجرا کردن مجدد Effect به دلیل فراخوانی کامپوننت بعدی ، React عضویت ما را لغو می کند.
مثل useState از چند useEffect در یک کامپوننت می توانید استفاده کنید.
دقیقاً مانند موارد دیگر useState، می توانید از بیش از یک use effect در یک component استفاده کنید:
} (function FriendStatusWithCounter(props
;(const [count, setCount] = useState(0
;`useEffect(() => { document.title = `You clicked ${count} times
;({
;(const [isOnline, setIsOnline] = useState(null
;(useEffect(() => { ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange
} <=() return
;(ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange
;{
;({
}(function handleStatusChange(status
;(setIsOnline(status.isOnline
{
…//
Hook ها به شما امکان می دهد تا side effect را به جای تقسیم کردن در کلاس react بر اساس روشهای چرخه عمر ، در بخشهایی از جمله مرتبط سازی کنید (مانند اضافه کردن و حذف اشتراک).
context hook چیست؟
React Context API از طریق tree of component برای حل مشکل فرستادن value ها به صورت props معرفی شد.state های برنامه به صورت global ذخیره می گردند و بین کامپوننت های مختلف به اشتراک گذاشته می شوند درنتیجه با افزودن hook به ساختار React یک hook جدید به نام useContext ایجاد می شود.
useContext hook مانند بقیه hook های که دیده شد، برای نوشتن و استفاده راحتتر و با React’s functional components به کار برده می شود قبلا فقط از Context API در class components استفاده میکردیم.درصورتی که در حال حاضر با این hook به راحتی از Context در functional components استفاده می شود که موجب ساده ترشدن و خواناترشدن کد می شود.
// App.js
;()var ThemeContext = React.createContext
}(function App(props
}=var themeValues
“mode: “dark
;{
<{return <ThemeContext.Provider value={themeValues
<Something>
</Hello>
<Something/>
<ThemeContext.Provider/>
{
;{export {ThemeContext
Hello.js//
;”import {ThemeContext} from “./App.js
}()function Hello
;(var theme = useContext(ThemeContext
`{return `Theme mode is: ${theme.mode
{
قوانین Hooks
هوک ها توابع JavaScript هستند ، اما دو قانون اضافی را اعمال می کنند:
• فقط هوک ها در سطح بالا صدا زده شوند آنها را در داخل حلقه ها ، شرایط یا توابع تو در تو صدا نزنید.
• فقط از تابع ،React Hooks را صدا بزنید . hooks در ساختار کلاس کاربرد ندارند و فقط یک مکان معتبر دیگر برای فرا خواندن Hooks وجود دارد آن هم Hooks سفارشی خود شما.
جمع بندی
با توجه به آنچه گفته شد hooks ویژگی جدید ریکت می باشد که در کنار آن از کلاس ها هم می توان استفاده کرد و دیگر نیازی به استفاده مجدد از کامپوننت ها نیست و امکان نوشتن لاجیک های جدید فراهم می شود که می توان هر کدام را جداگانه برایش آزمایش کرد و جاهای مختلفی از آن استفاده کرد و با hooks می توانید هر کدام از لاجیک ها را به فانکشن های کوچکتر تقسیم کنید در اینجا با hooks در ریکت و با استفاده از قوانین هوک ها فهمیدیم که چه جاهایی از کامپوننت میتوانیم و چه جاهایی نمیتوانیم از هوک ها استفاده کنیم پس نتیجه میگیریم که با استفاده از هوک ها کد کمتری می توان نوشت.
