Summarize this content to 400 words in Persian Lang
React Hooks در نسخه 16.8 به React اضافه شد و نحوه نوشتن برنامه های React را کاملاً تغییر داد. قبل از هوک‌ها، ما مجبور بودیم از اجزای کلاس برای مدیریت روش‌های حالت و چرخه زندگی استفاده کنیم، که می‌تواند کد ما را به خصوص در برنامه‌های بزرگ‌تر پیچیده کند. قلاب‌ها به ما امکان می‌دهند از اجزای کاربردی برای مدیریت آسان‌تر مواردی مانند حالت، عوارض جانبی و بهینه‌سازی عملکرد استفاده کنیم.
با قلاب ها می توانیم:
مدیریت وضعیت (useState)،
کنترل عوارض جانبی، مانند واکشی داده ها (useEffect)، و
بهبود عملکرد (useMemo، useCallback).
در این مقاله، مهم‌ترین React Hookهایی را که باید بدانید را مرور می‌کنیم. من توضیح خواهم داد که هر کدام چه کاری انجام می دهند، چرا مفید است و چگونه از آن در پروژه های خود استفاده کنید تا کد React خود را ساده تر و کارآمدتر کنید.
1. useState
چه کاری انجام می دهد:useState به شما امکان می دهد حالت را به اجزای عملکردی اضافه کنید. قبل از هوک ها، فقط کامپوننت های کلاس می توانستند حالت داشته باشند، اما اکنون می توانید از آن در کامپوننت های تابعی نیز استفاده کنید. این قلاب دو چیز را برمی گرداند: وضعیت فعلی و یک تابع برای به روز رسانی آن حالت.
زمان استفاده از آن:هنگامی که نیاز دارید مقداری را که در طول زمان تغییر می‌کند، مانند ورودی کاربر در یک فرم، یا وضعیت تغییر جهت نمایش و پنهان کردن عناصر، ردیابی کنید، از useState استفاده کنید.
مثال:
چرا مهم است:این کار مدیریت حالت ساده در اجزای عملکردی را آسان می کند و کد شما را خواناتر از اجزای کلاس نگه می دارد.
بیایید تلاش کنیم و یاد بگیریم: ازState Hook در React استفاده کنید — Crash Course by توسعه دهنده وب ساده شده
2. useEffect
چه کاری انجام می دهد:useEffect به شما امکان می دهد تا عوارض جانبی را در اجزای خود اجرا کنید، مانند واکشی داده، به روز رسانی DOM، یا اشتراک در چیزی مانند WebSocket. بعد از رندر شدن کامپوننت اجرا می‌شود و می‌توانید زمان اجرای آن را با ارسال وابستگی‌ها کنترل کنید.
زمان استفاده از آن:هر زمان که نیاز به اجرای کد پس از رندر یا زمانی که مقداری تغییر می‌کند، از useEffect استفاده کنید، مانند واکشی داده‌ها از یک API هنگام نصب مؤلفه یا به‌روزرسانی عنوان سند هنگام تغییر مقدار.
مثال:
چرا مهم است:این جایگزین روش‌های چرخه عمر قدیمی مانند componentDidMount و componentDidUpdate می‌شود و مدیریت عوارض جانبی را به روشی تمیزتر و شفاف‌تر آسان‌تر می‌کند.
بیایید تلاش کنیم و یاد بگیریم: React useEffect Hook – چه، چرا، و چگونه توسط توسعه دهنده وب ساده شده
3. useContext
چه کاری انجام می دهد:useContext به شما این امکان را می‌دهد تا به مقادیر از یک زمینه دسترسی داشته باشید، بدون اینکه نیازی به ارسال props به صورت دستی در هر سطح از درخت جزء خود داشته باشید (که به آن “prop drilling” نیز می‌گویند). به اشتراک گذاری داده هایی مانند طرح زمینه فعلی، وضعیت احراز هویت کاربر یا تنظیمات زبان در برنامه شما را آسان می کند.
زمان استفاده از آن:هنگامی که داده‌ها یا عملکردهایی دارید که باید چندین مؤلفه به آنها دسترسی داشته باشند، از جمله تنظیمات سراسری، تم‌ها یا حالت‌های مشترک، از useContext استفاده کنید.
مثال:
چرا مهم است:این فرآیند انتقال داده از طریق بسیاری از لایه‌های مؤلفه را ساده می‌کند و کد شما را خشک نگه می‌دارد (خودتان را تکرار نکنید).
بیایید تلاش کنیم و یاد بگیریم: React useContext Hook Tutorial توسط توسعه دهنده وب ساده شده
4. useReducer
چه کاری انجام می دهد:useReducer مانند useState است، اما برای مدیریت منطق پیچیده تر وضعیت بهتر است. به جای اینکه فقط حالت را مستقیماً تنظیم کنید، اقداماتی را به یک تابع کاهنده ارسال می کنید، که تعیین می کند وضعیت چگونه باید بر اساس عملکرد تغییر کند.
زمان استفاده از آن:زمانی که مدیریت حالت جزء شما برای useState بسیار پیچیده می شود، از useReducer استفاده کنید، مانند زمانی که نیاز دارید چندین بخش مرتبط از حالت یا انتقال حالت را مدیریت کنید.
مثال:
چرا مهم است:این برای مدیریت حالت هایی که دارای انتقال های زیادی هستند (به عنوان مثال، حالت یا حالت با اقدامات پیچیده) ایده آل است. همچنین درک و پیش بینی چگونگی تغییر حالت را آسان تر می کند.
بیایید تلاش کنیم و یاد بگیریم: useReducer Hook — React Hooks Tutorial توسط توسعه دهنده وب ساده شده
5. از یادداشت استفاده کنید
چه کاری انجام می دهد:useMemo با ذخیره کردن نتیجه یک محاسبات در حافظه پنهان و تنها زمانی که وابستگی‌های آن تغییر می‌کند، دوباره آن را محاسبه می‌کند، به بهبود عملکرد کمک می‌کند. این به ویژه برای محاسبات گران قیمت یا هنگام ارائه لیست های بزرگ مفید است.
زمان استفاده از آن:هنگامی که یک محاسبه گران قیمت دارید (مثلاً مرتب سازی، فیلتر کردن) که نباید در هر رندر دوباره محاسبه شود، مگر اینکه مقادیر خاصی (وابستگی ها) تغییر کرده باشند، از useMemo استفاده کنید.
مثال:
چرا مهم است:از محاسبات مجدد غیرضروری جلوگیری می کند و عملکرد برنامه شما را بهبود می بخشد، به ویژه در مؤلفه هایی که مرتباً مجدداً رندر می شوند.
بیایید تلاش کنیم و یاد بگیریم: React useMemo Hook – از محاسبات غیر ضروری خودداری کنید توسعه دهنده وب ساده شده
6. استفاده از Callback
چه کاری انجام می دهد:useCallback شبیه useMemo است، اما به جای مقدار، یک تابع را به خاطر می‌سپارد. این تضمین می‌کند که یک مرجع تابع بین رندرها یکسان باقی می‌ماند، که می‌تواند از رندرهای مجدد غیرضروری در مؤلفه‌های فرزند که به آن تابع متکی هستند جلوگیری کند.
زمان استفاده از آن:از useCallback هنگام ارسال یک تابع به‌عنوان پشتیبان به مؤلفه فرزند استفاده کنید، و نمی‌خواهید هر زمان که مؤلفه والد دوباره ارائه می‌شود، آن فرزند بی‌رویه رندر شود.
مثال:
چرا مهم است:با جلوگیری از ایجاد مجدد توابع در هر رندر، از مشکلات عملکرد جلوگیری می کند، که می تواند باعث شود اجزای فرزند حتی در مواقعی که لازم نیست دوباره رندر شوند.
بیایید تلاش کنیم و یاد بگیریم: React useCallback Hook Tutorial توسط The Net Ninja
7. useRef
چه کاری انجام می دهد:useRef به شما امکان دسترسی به یک شیء قابل تغییر را می دهد که در رندرها باقی می ماند. اغلب برای ارجاع مستقیم به عناصر DOM یا ذخیره مقادیری استفاده می‌شود که هنگام به‌روزرسانی، رندر مجدد را راه‌اندازی نمی‌کنند.
زمان استفاده از آن:هنگامی که نیاز به تعامل مستقیم با یک عنصر DOM دارید (مثلاً فوکوس کردن یک ورودی) یا زمانی که نیاز به ذخیره مقداری دارید که رابط کاربری را تغییر نمی‌دهد (مثلاً شناسه تایمر) از useRef استفاده کنید.
مثال:
چرا مهم است:برای کار مستقیم با DOM و مدیریت مقادیر قابل تغییر بدون ایجاد رندرهای غیر ضروری ضروری است.
بیایید تلاش کنیم و یاد بگیریم: useRef Hook – React Tutorial توسط Web Dev Simplified
نتیجه گیری:
تسلط بر این React Hook ها شما را به یک توسعه دهنده کارآمدتر تبدیل می کند و به شما امکان می دهد کدهای تمیزتر و مقیاس پذیرتر بنویسید. قلاب‌هایی مانند useState و useEffect وضعیت اولیه و عوارض جانبی را کنترل می‌کنند، در حالی که قلاب‌های پیشرفته‌تر مانند useMemo، useReducer و useContext به شما کمک می‌کنند عملکرد را بهینه کنید و منطق پیچیده‌تر را به راحتی مدیریت کنید.
React Hooks در نسخه 16.8 به React اضافه شد و نحوه نوشتن برنامه های React را کاملاً تغییر داد. قبل از هوک‌ها، ما مجبور بودیم از اجزای کلاس برای مدیریت روش‌های حالت و چرخه زندگی استفاده کنیم، که می‌تواند کد ما را به خصوص در برنامه‌های بزرگ‌تر پیچیده کند. قلاب‌ها به ما امکان می‌دهند از اجزای کاربردی برای مدیریت آسان‌تر مواردی مانند حالت، عوارض جانبی و بهینه‌سازی عملکرد استفاده کنیم.
با قلاب ها می توانیم:
- مدیریت وضعیت (useState)،
- کنترل عوارض جانبی، مانند واکشی داده ها (useEffect)، و
- بهبود عملکرد (useMemo، useCallback).
در این مقاله، مهم‌ترین React Hookهایی را که باید بدانید را مرور می‌کنیم. من توضیح خواهم داد که هر کدام چه کاری انجام می دهند، چرا مفید است و چگونه از آن در پروژه های خود استفاده کنید تا کد React خود را ساده تر و کارآمدتر کنید.
1. useState
چه کاری انجام می دهد:
useState به شما امکان می دهد حالت را به اجزای عملکردی اضافه کنید. قبل از هوک ها، فقط کامپوننت های کلاس می توانستند حالت داشته باشند، اما اکنون می توانید از آن در کامپوننت های تابعی نیز استفاده کنید. این قلاب دو چیز را برمی گرداند: وضعیت فعلی و یک تابع برای به روز رسانی آن حالت.
زمان استفاده از آن:
هنگامی که نیاز دارید مقداری را که در طول زمان تغییر می‌کند، مانند ورودی کاربر در یک فرم، یا وضعیت تغییر جهت نمایش و پنهان کردن عناصر، ردیابی کنید، از useState استفاده کنید.
مثال:
چرا مهم است:
این کار مدیریت حالت ساده در اجزای عملکردی را آسان می کند و کد شما را خواناتر از اجزای کلاس نگه می دارد.
بیایید تلاش کنیم و یاد بگیریم: ازState Hook در React استفاده کنید — Crash Course by توسعه دهنده وب ساده شده
2. useEffect
چه کاری انجام می دهد:
useEffect به شما امکان می دهد تا عوارض جانبی را در اجزای خود اجرا کنید، مانند واکشی داده، به روز رسانی DOM، یا اشتراک در چیزی مانند WebSocket. بعد از رندر شدن کامپوننت اجرا می‌شود و می‌توانید زمان اجرای آن را با ارسال وابستگی‌ها کنترل کنید.
زمان استفاده از آن:
هر زمان که نیاز به اجرای کد پس از رندر یا زمانی که مقداری تغییر می‌کند، از useEffect استفاده کنید، مانند واکشی داده‌ها از یک API هنگام نصب مؤلفه یا به‌روزرسانی عنوان سند هنگام تغییر مقدار.
مثال:
چرا مهم است:
این جایگزین روش‌های چرخه عمر قدیمی مانند componentDidMount و componentDidUpdate می‌شود و مدیریت عوارض جانبی را به روشی تمیزتر و شفاف‌تر آسان‌تر می‌کند.
بیایید تلاش کنیم و یاد بگیریم: React useEffect Hook – چه، چرا، و چگونه توسط توسعه دهنده وب ساده شده
3. useContext
چه کاری انجام می دهد:
useContext به شما این امکان را می‌دهد تا به مقادیر از یک زمینه دسترسی داشته باشید، بدون اینکه نیازی به ارسال props به صورت دستی در هر سطح از درخت جزء خود داشته باشید (که به آن “prop drilling” نیز می‌گویند). به اشتراک گذاری داده هایی مانند طرح زمینه فعلی، وضعیت احراز هویت کاربر یا تنظیمات زبان در برنامه شما را آسان می کند.
زمان استفاده از آن:
هنگامی که داده‌ها یا عملکردهایی دارید که باید چندین مؤلفه به آنها دسترسی داشته باشند، از جمله تنظیمات سراسری، تم‌ها یا حالت‌های مشترک، از useContext استفاده کنید.
مثال:
چرا مهم است:
این فرآیند انتقال داده از طریق بسیاری از لایه‌های مؤلفه را ساده می‌کند و کد شما را خشک نگه می‌دارد (خودتان را تکرار نکنید).
بیایید تلاش کنیم و یاد بگیریم: React useContext Hook Tutorial توسط توسعه دهنده وب ساده شده
4. useReducer
چه کاری انجام می دهد:
useReducer مانند useState است، اما برای مدیریت منطق پیچیده تر وضعیت بهتر است. به جای اینکه فقط حالت را مستقیماً تنظیم کنید، اقداماتی را به یک تابع کاهنده ارسال می کنید، که تعیین می کند وضعیت چگونه باید بر اساس عملکرد تغییر کند.
زمان استفاده از آن:
زمانی که مدیریت حالت جزء شما برای useState بسیار پیچیده می شود، از useReducer استفاده کنید، مانند زمانی که نیاز دارید چندین بخش مرتبط از حالت یا انتقال حالت را مدیریت کنید.
مثال:
چرا مهم است:
این برای مدیریت حالت هایی که دارای انتقال های زیادی هستند (به عنوان مثال، حالت یا حالت با اقدامات پیچیده) ایده آل است. همچنین درک و پیش بینی چگونگی تغییر حالت را آسان تر می کند.
بیایید تلاش کنیم و یاد بگیریم: useReducer Hook — React Hooks Tutorial توسط توسعه دهنده وب ساده شده
5. از یادداشت استفاده کنید
چه کاری انجام می دهد:
useMemo با ذخیره کردن نتیجه یک محاسبات در حافظه پنهان و تنها زمانی که وابستگی‌های آن تغییر می‌کند، دوباره آن را محاسبه می‌کند، به بهبود عملکرد کمک می‌کند. این به ویژه برای محاسبات گران قیمت یا هنگام ارائه لیست های بزرگ مفید است.
زمان استفاده از آن:
هنگامی که یک محاسبه گران قیمت دارید (مثلاً مرتب سازی، فیلتر کردن) که نباید در هر رندر دوباره محاسبه شود، مگر اینکه مقادیر خاصی (وابستگی ها) تغییر کرده باشند، از useMemo استفاده کنید.
مثال:
چرا مهم است:
از محاسبات مجدد غیرضروری جلوگیری می کند و عملکرد برنامه شما را بهبود می بخشد، به ویژه در مؤلفه هایی که مرتباً مجدداً رندر می شوند.
بیایید تلاش کنیم و یاد بگیریم: React useMemo Hook – از محاسبات غیر ضروری خودداری کنید توسعه دهنده وب ساده شده
6. استفاده از Callback
چه کاری انجام می دهد:
useCallback شبیه useMemo است، اما به جای مقدار، یک تابع را به خاطر می‌سپارد. این تضمین می‌کند که یک مرجع تابع بین رندرها یکسان باقی می‌ماند، که می‌تواند از رندرهای مجدد غیرضروری در مؤلفه‌های فرزند که به آن تابع متکی هستند جلوگیری کند.
زمان استفاده از آن:
از useCallback هنگام ارسال یک تابع به‌عنوان پشتیبان به مؤلفه فرزند استفاده کنید، و نمی‌خواهید هر زمان که مؤلفه والد دوباره ارائه می‌شود، آن فرزند بی‌رویه رندر شود.
مثال:
چرا مهم است:
با جلوگیری از ایجاد مجدد توابع در هر رندر، از مشکلات عملکرد جلوگیری می کند، که می تواند باعث شود اجزای فرزند حتی در مواقعی که لازم نیست دوباره رندر شوند.
بیایید تلاش کنیم و یاد بگیریم: React useCallback Hook Tutorial توسط The Net Ninja
7. useRef
چه کاری انجام می دهد:
useRef به شما امکان دسترسی به یک شیء قابل تغییر را می دهد که در رندرها باقی می ماند. اغلب برای ارجاع مستقیم به عناصر DOM یا ذخیره مقادیری استفاده می‌شود که هنگام به‌روزرسانی، رندر مجدد را راه‌اندازی نمی‌کنند.
زمان استفاده از آن:
هنگامی که نیاز به تعامل مستقیم با یک عنصر DOM دارید (مثلاً فوکوس کردن یک ورودی) یا زمانی که نیاز به ذخیره مقداری دارید که رابط کاربری را تغییر نمی‌دهد (مثلاً شناسه تایمر) از useRef استفاده کنید.
مثال:
چرا مهم است:
برای کار مستقیم با DOM و مدیریت مقادیر قابل تغییر بدون ایجاد رندرهای غیر ضروری ضروری است.
بیایید تلاش کنیم و یاد بگیریم: useRef Hook – React Tutorial توسط Web Dev Simplified
نتیجه گیری:
تسلط بر این React Hook ها شما را به یک توسعه دهنده کارآمدتر تبدیل می کند و به شما امکان می دهد کدهای تمیزتر و مقیاس پذیرتر بنویسید. قلاب‌هایی مانند useState و useEffect وضعیت اولیه و عوارض جانبی را کنترل می‌کنند، در حالی که قلاب‌های پیشرفته‌تر مانند useMemo، useReducer و useContext به شما کمک می‌کنند عملکرد را بهینه کنید و منطق پیچیده‌تر را به راحتی مدیریت کنید.
