شروع کار با Hookهای React

React 16 چندین ویژگی جدید را اضافه کرد، که نحوه ساخت وب‌اپلیکیشن‌ها را بهبود بخشیدند. تاثیرگذارترین بروزرسانی، ویژگی Hooks در نسخه 16.8 است. Hookها ما را قادر می‌سازند تا کامپوننت‌های React عملکردی‌ای بنویسیم که state و عوارض جانبی را مدیریت کرده، و کد ما را تمیزتر می‌کنند و قابلیت به اشتراک گذاری آسان عملکرد را فراهم می‌کنند. React کامپوننت‌های کلاس را حذف نمی‌کند، اما این کامپوننت‌ها باعث بروز بسیاری از مشکلات می‌شوند و برای بهینه‌سازی‌های آینده در کد، زیان‌آور هستند.

بینش موجود در راستای hookها، این است که تمام کامپوننت‌های جدید با استفاده از API نوشته شده، و به وب‌اپلیکیشن‌های مقیاس‌پذیرتری با کد بهتر ختم می‌شوند. این آموزش شما را به صورت قدم به قدم در کار با hookها راهنمایی خواهد کرد و عملکرد هسته‌ای آن‌ها را با ساخت یک برنامه شمارنده به شما نشان خواهد داد.

بازبینی اجمالی بر روی hookها

Hookها قابلیت مدیریت state و عوارض جانبی در کامپوننت‌های عملکردی را فراهم کرده، و همچنین یک رابط ساده برای کنترل lifecycle کامپوننت فراهم می‌کنند. چهار hook داخلی که توسط React فراهم شده‌اند، عبارتند از useState، useEffect، useReducer و useContext.

• useState نیاز به this.state مورد استفاده در کامپوننت‌های کلاس را جایگزین می‌کند.
• useEffect عوارض جانبی برنامه را با کنترل کردن متدهای lifecycle با نام componentDidMount، componentDidUpdate و componentWillUnmount مدیریت می‌کند.
• useContext ما را قادر می‌سازد تا در زمینه React اشتراک داشته باشیم.
• useReducer مشابه useState است، اما بروزرسانی state پیچیده‌تر را نیز ممکن می‌سازد.

دو تابع hook اصلی که شما استفاده خواهید کرد، useState و useEffect هستند که state و lifecycle استاندارد React را مدیریت می‌کنند. useReducer برای مدیریت stateهای پیچیده‌تر استفاده می‌شود، و useContext یک hook برای انتقال مقادیر از زمینه global به یک کامپوننت است.

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

ساخت شمارنده با استفاده از hookها

ما برای ساخت شمارنده خود، از Create React App برای bootstrap کردن برنامه استفاده می‌کنیم. شما می‌توانید این پکیج را به طور global نصب کنید، یا این که npx را از command line به کار بگیرید.

npx create-react-app react-hooks-counter

cd react-hooks-counter

Hookهای React یک ویژگی جدید هستند؛ پس مطمئن شوید که نسخه 16.8 را نصب شده دارید. نسخه react و react-dom در داخل فایل package.json شما باید چیزی به مانند قطعه کد زیر باشند. اگر نیستند، آن‌ها را بروزرسانی کرده و با استفاده از دستور yarn مجددا نصب کنید.

اساس hookها این است که آن‌ها داخل کامپوننت‌های عملکردی بکار برده شده‌اند. برای شروع، بیایید فایل boilerplate داخل src/App.js را به یک کامپوننت عملکردی تبدیل کرده و محتویات را حذف کنیم.

در بالای فایل، می‌توانیم useState و useEffect را از React وارد کنیم.

import React, { useState, useEffect } from 'react';

ساده‌ترین hook، هوک useState است؛ زیرا هدف آن نگهداری یک مقدار تنها است، پس بیایید از آن شروع کنیم. این تابع یک مقدار اولیه را می‌گیرد و آرایه‌ای از آرگومان‌ها را بر می‌گرداند، که آیتم موجود در ورودی صفر، شامل مقدار state بوده و آیتم موجود در ورودی یک، شامل یک تابع برای بروزرسانی مقدار مورد نظر است. ما شمارش خود را با صفر شروع کرده، و متغیرهای برگشتی را count و setCount نامگذاری می‌کنیم.

const [count, setCount] = useState(0);

نکته: مقدار برگشتی useState یک آرایه است. در جهت ساده‌سازی این سینتکس، ما از تخریب آرایه برای استخراج عناصر موجود در ورودی‌های صفر و یک استفاده می‌کنیم.

ما در داخل کامپوننت React رندر شده‌ خود، شمارش را نمایش داده و دکمه‌ای برای افزایش شمارش به مقدار ۱ با استفاده از setCount نمایش می‌دهیم.

با یک تابع ساده، ما نیاز به داشتن یک کامپوننت کلاس به همراه this.state و this.setState را برای مدیریت داده‌های خود از بین برده‌ایم. هر زمان که شما بر روی دکمه increment کلیک می‌کنید، شمارش به مقدار ۱ عدد افزایش خواهد یافت. از آنجایی که ما در حال استفاده از یک hook هستیم، React این تغییر را در state تشخیص داده و DOM‌ را با مقدار بروزسانی شده مجددا رندر خواهد کرد.

برای نمایش توسعه‌پذیری بروزرسانی‌های state، ما دکمه‌های افزایش به مقدار ۲، ۵ و ۱۰ را نیز اضافه خواهیم کرد. ما همچنین با ذخیره کردن این مقادیر در یک آرایه، از تکرار کد خود جلوگیری خواهیم کرد. ما با استفاده از تابع .map()، بر روی این تابع تکرار می‌کنیم، که یک آرایه از کامپوننت‌های React را بر خواهد گرداند. React با این کار به عنوان عناصر همسطح در DOM رفتار خواهد کرد. حال شما می‌توانید شمارنده را به مقادیر مختلف افزایش دهید.

حال ما هوک useEffect را ادغام خواهیم کرد. این hook شما را قادر می‌سازد تا عوارض جانبی و رویدادهای ناهمگام را مدیریت کنید. قابل توجه‌ترین و مورد استفاده‌ترین اثر جانبی، یک فراخوانی API است. ما با استفاده از یک تابع setTimeout، از طبیعت همگام یک فراخوانی API تقلید می‌کنیم. ما یک درخواست API تقلبی به کامپوننت ارسال خواهیم کرد، که پس از ۱ ثانیه صبر کردن، یک integer تصادفی را از ۱ تا ۱۰راه‌اندازی خواهد کرد. ما همچنین یک useEffect سنتی خواهیم داشت که عنوان سند (یک اثر جانبی) را با شمارش فعلی برای نمایش نحوه پاسخ دادن آن به یک تغییر در state بروزسانی خواهد کرد.

هوک useEffect یک تابع را به عنوان یک آرگومان می‌گیرد. useEffect جایگزین متدهای کلاس componentDidMount، componentDidUpdate و componentWillUnmount خواهد شد. وقتی که state کامپوننت مورد نظر سوار شده یا بروزرسانی می‌شود، React تابع callback را اجرا خواهد کرد. اگر تابع callback شما، خودش هم یک تابع را برگرداند، React آن را در طی componentWillUnmount اجرا خواهد کرد.

در ابتدا، بیایید از effect خود برای بروزرسانی عنوان سند استفاده کنیم. در داخل بدنه تابعمان، useEffect که document.title = ‘Count’ + count را تنظیم می‌کند، اضافه می‌کنیم.

وقتی که شمارش state بروزرسانی می‌شود، شما باید ببینید که عنوان هم به طور همزمان بروزرسانی می‌شود.

برای قدم آخر، ما یک فراخوانی اِی‌پی‌آی mock خواهیم ساخت که یک integer را برای بروزرسانی شمارش state بر می‌گرداند. ما از setTimeout و یک تابع که یک promise‌ را بر می‌گرداند استفاده می‌کنیم. زیرا این کار، زمان مورد نیاز برای صبر کردن برای برگشتن درخواست API و مقدار برگشتی یک promise را شبیه‌سازی می‌کند، که ما را قادر می‌سازد تا پاسخ را به صورت ناهمگام مدیریت کنیم.

برای mock کردن یک API، ما یک تابع به نام mockApi در بالای کامپوننت خود می‌سازیم. این کامپوننت یک promise را با یک integer تصادفی بین ۱ تا ۱۰ بر می‌گرداند.

یک الگوی رایج، این است که درخواست‌های دریافت را در componentDidMount انجام دهیم. برای تکثیر این در آخرین کامپوننت عملکردی خود، ما یک useState دیگر برای مدیریت یک متغیر به نام hasFetched استفاده می‌کنیم: const [hasFetched, setFetch] = useState(false). این برای جلوگیری mockApi از اجرا شدن بر روی بروزرسانی‌های متعاقب استفاده می‌شود.

هوک دریافت ما یک تابع ناهمگام خواهد بود؛ پس ما از async / await برای مدیریت نتیجه استفاده خواهیم کرد. در داخل تابع useEffect، ما اول بررسی می‌کنیم که آیا hasFetched اجرا شده است، یا نه. اگر نشده است، ما mockApi را فراخوانی می‌کنیم و آن را با یک نتیجه setCount می‌کنیم، تا مقدار خود را راه‌اندازی کرده و سپس hasFetched خود را برابر با true قرار دهیم.

شاخص‌های بصری برای تجربیات کاربری ضروری بوده، و بازخوردی را برای تمام کاربران برنامه فراهم می‌کنند. از آنجایی که ما منتظر یک مقدار شمارش اولیه هستیم، ما می‌خواهیم دکمه‌های خود را مخفی کرده و اگر hasFetched برابر با false است، متن «Loading…» را بر روی صفحه نمایش دهیم.

نتیجه نهایی، به این صورت است:

کد نهایی:

جمع‌بندی

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

منبع