Hooks در React چیست

فریم ورک react از فریم ورک های جاوا اسکریپت می باشد که در مقالات قبلی در مورد آن صحبت کردیم در این مقاله قصد داریم در مورد ویژگی جدید  hooks در react js و اصلا اینکه چرا به وجود آمد صحبت کنیم و سه تا از هوک های پایه ی react را بررسی کنیم که شامل state hook و effect hook و context hook می شوند و قوانین هوک ها را شرح دهیم ، ویژگی جدید ریکت که در موردش توضیح خواهیم داد موجب افزایش لذت کد نویسی با ریکت شده است.

 

Hooks در React چیست؟

hooks ویژگی جدیدی در React 16.8 هستند آنها به شما اجازه می دهند بدون نوشتن class، از state و سایر ویژگی های React استفاده کنید. با استفاده از hook می‎توان در کامپوننت فانکشنال ریکت به جزstate از life cycle متد‎ها هم بهره برد و کدهای قابل استفاده ی مجدد نوشت و مقادیر را از زمینه global به یک کامپوننت انتقال داد ، شما با استفاده از hook می توانید با فانکشن و بدون استفاده از کلاس‌ها کامپوننت‌هایتان را بنویسید.


مطالعه مقاله (فریم ورک React JS چیست و چه کاربردی دارد) به شما توصیه می شود.


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 onClick={() => 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 onClick={() => 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 بر اساس روشهای چرخه عمر ، در بخشهایی از جمله مرتبط سازی کنید (مانند اضافه کردن و حذف اشتراک).

Effect Hook

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
{

context Hook

قوانین Hooks 

هوک ها توابع JavaScript هستند ، اما دو قانون اضافی را اعمال می کنند:
• فقط هوک ها در سطح بالا صدا زده شوند آنها را در داخل حلقه ها ، شرایط یا توابع تو در تو صدا نزنید.
• فقط از تابع ،React Hooks را صدا بزنید . hooks در ساختار کلاس کاربرد ندارند و فقط یک مکان معتبر دیگر برای فرا خواندن Hooks وجود دارد آن هم Hooks سفارشی خود شما.

جمع بندی

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

 


 شایان ذکر است که آکادمی آمانج به دلیل تقاضای دانشجویان گرامی اولین دوره آموزش react JS را در پاییز ۹۹ برگزار خواهد کرد و شما عزیزان می توانید برای اطلاعات بیشتر در مورد سرفصل ها و نحوه برگزاری کلاس ها از لینک مریوطه استفاده کنید.


 

 

آیا این مطلب برای شما مفید بود؟

امتیازشو ثبت کنید

میانگین / 5. تعداد رای

اولین نفر شما امتیاز دهید

دوره غیرحضوری متخصص جاوااسکریپت

دوره تخصصی و پروژه محور جاوااسکریپت

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

شاید به این مطالب نیز علاقه مند باشید.

همه چیز درباره جاوا اسکریپت

همه چیز درباره‌ی جاوا اسکریپت 

در دنیای امروزی تقریبا تمام مشاغل به سمت دیجیتالی شدن پیش می‌روند و استقبال از وب‌سایت‌ها و اپلیکیشن‌ها باعث شده طرفداران برنامه‌نویسی روز به روز افزایش یابند. اگر شما هم…

node.js در جاوا

معرفی پلتفرم Node.Js و کاربرد آن

در دنیای امروز کاربرد زبان برنامه نویسی جاوا اسکریپت را در برنامه‌های مختلف و تاثیر آن در زندگی دیجیتالی را مشاهده می‌کنید. هرچند جاوا اسکریپت را کنار HTML و CSS…

یادگیری زبان برنامه نویسی جاوااسکریپت

چرا یادگیری جاوااسکریپت در سال ۲۰۲۰ ضرورت دارد؟

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

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
آکادمی آمانج
مهارت آموزی جهت ورود به بازار کار

تاییدیه ها

تهران - امیرآباد، دانشکده فنی دانشگاه تهران، ساختمان مکانیک جدید واحد ۱۱۴

آیا این مطلب برای شما مفید بود؟

امتیازشو ثبت کنید

میانگین / 5. تعداد رای

اولین نفر شما امتیاز دهید

دوره غیرحضوری متخصص جاوااسکریپت

دوره تخصصی و پروژه محور جاوااسکریپت

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

کد تخفیف نمیخوای؟

اگه میخوای کد تخفیف شرکت در دوره‌ها، وبینارهای رایگان، بهترین مقالات آکادمی آمانج رو از دست ندی ایمیلت رو این زیر وارد کن!
همین الان عضو شو
close-link
من اینجام