معرفی Hook ها در React

Hook ها (یا قلاب‌ها) قابلیتی است که در آینده نزدیک منتشر شده و به شما اجازه می‌دهد بدون نوشتن یک class از حالت یا قابلیت‌های دیگر React استفاده کنید. این قابلیت در حال حاضر در نسخۀ ۱۶.۷.۰-alpha ری اکت موجود است.

import { 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ی است که با آن آشنا می‌شویم، اما این مثال فقط یک تیزر است. اگر هنوز برایتان قابل اجرا نیست نگران نباشید.

شما می‌توانید از مقاله بعدی یاد گرفتن Hooks را شروع کنید. در این صفحه می‌خواهیم بیان کنیم که چرا Hooks را به ری اکت اضافه کردیم و چگونه آنها می‌توانند در نوشتن برنامه‌ها بزرگ به شما کمک کنند.

معرفی ویدئویی

در کنفرانس سال ۲۰۱۸ ری اکت، سوفی آلبرت و دان آبرامُو Hooks را معرفی کرده و پس از آنها رایان فلورنس نشان داد که چگونه یک برنامه را برای استفاده از آنها بازسازی کنیم. می‌توانید این ویدئو را ببینید.

بدون Breaking Changes

قبل از اینکه ادامه دهیم، دقت کنید که Hook ها:

  • کاملا انتخابی هستند. شما می‌توانید از Hook ها در چند کامپوننت و بدون بازنویسی کد موجود استفاده کنید. اما اگر نمی‌خواهید، همین الان مجبور به یاد گرفتن و استفاده از Hook ها نیستید.
  • صد در صد سازگاری عقبرو دارند. Hook ها شامل هیچ breaking changeی نیستند.
  • اکنون قابل دسترسی هستند. Hook ها در حال حاضر در نسخۀ آلفا موجود بوده و امیدواریم پس از دریافت بازخوردها، در نسخۀ ۷ ری اکت آن را قرار دهیم.

برنامه‌ای برای حذف class ها از React نداریم. شما می‌توانید مطالب راج به استراتژی اتخاذ تدریجی Hook ها را در پایین همین صفحه ببینید.

Hook ها جایگزین دانش مفاهیم ری اکت شما نخواهند شد. در مقابل، API هموارتری به مفاهیم ری اکتی که با آن آشنا هستید (مانند prop ها، حالت، ref ها و چرخۀ زندگی) فراهم می‌کند. همچنین نشان خواهیم داد که Hook ها یک راه قدرتمند جدید برای ترکیب آنها در اختیار ما می‌گذارد.

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

انگیزه

Hook ها بسیاری از مشکلات متنوع و ظاهرا غیرمرتبطی در React را که ما در طی پنج سال کدنویسی و نگهداری ده‌ها هزار کامپوننت با آنها مواجه شده‌ایم، حل کرده است. هنگام یادگیری React و استفادۀ روزانۀ آن و حتی استفاده از کتابخانۀ دیگری با مدل کامپوونت مشابه، ممکن است برخی از این مشکلات را نشخیص داده باشید.

استفادۀ مجدد از منطق بین کامپوننت‌ها دشوار است

ری اکت، یک راه اتصال رفتار قابل استفادۀ مجدد را به یک کامپوننت ارائه نمی‌کند. اگر مدتی با React کار کرده باشید، با الگوهایی مانند render props و کامپوننت‌ها مرتبۀ بالاتر که تلاش می‌کنند این مسئله را حل کنند، آشنا شده‌اید. اما این الگوها نیاز دارند که شما هنگام استفاده از آنها کامپوننت خود را بازسازی کنید، که این کار زحمت زیادی دارد و دنبال کردن کدها را دشوار می‌کند. اگر نگاهی به یک برنامۀ معمولی ری اکت در React DevTools بیندازید، احتمالا یک بستۀ جهنمی از کامپوننت‌ها محصور شده در لایه‌های providers و consumers و کامپوننت‌ها مرتبۀ بالاتر و render props و چیزهای دیگر پیدا خواهید کرد. اگر ما آنها را در DevTools فیلتر هم کنیم به مشکلی بنیادی‌تر بر خواهیم خورد: ری اکت به پایه‌ای بهتر جهت به اشتراک گذاری منطق نیاز خواهد داشت.

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

ما در رابطه با این موضوع بعدا در قسمت درست کردن Hooks متعلق به خودتان، بیشتر صحبت خواهیم کرد.

فهمیدن کامپوننت‌های پیچیده دشوار است

اغلب نیاز است کامپوننت هایی را حفظ کنیم که در ابتدا بسیار کوچک و ساده بوده و کم کم رشد کرده تا حدی که به یک کامپوننت به هم ریختۀ غیر قابل کنترل از منطق ها و اثرات جانبی تبدیل شده‌اند. هر متد چرخۀ زندگی اغلب شامل ترکیبی از منطق های حالت دار غیرمرتبط می‌شود. برای مثال کامپوننت ها ممکن است برخی اطلاعات گیری را در componentDidMount و componentDidUpdate اجرا کند. در حالی که همان متد componentDidMount ممکن است خود شامل منطق های حالت دار غیرمرتبطی که event listeners را تنظیم کرده و همراه با پاک سازی اجرا شده در componentWillUnmount است باشد. کدهای متقابلا مرتبط به هم که با هم تغییر می‌کنند از هم جدا می‌شوند، اما کدهای کاملا غیرمرتبط از هم، در نهایت در یک متد تک با هم ترکیب خواهند شد. این کار پیدا کردن باگ ها و ناسازگاری ها را آسان می‌کند.

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

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

در رابطه با این موضوع بعد در قسمت استفاده از Effect Hook بیشتر توضیح خواهیم داد.

Class ها هم انسان و هم ماشین را گیچ می‌کنند

علاوه بر قابل استفادۀ مجدد کردن کد و سخت‌تر کردن سازمان آن، ما متوجه شدیم که class ها می‌توانند مانع بزرگی در یادگیری ری اکت باشند. شما نیاز است متوجه شوید که this چگونه در جاوا اسکریپت کار می‌کند، که با طرز کار کردن آن در بیشتر زبان‌های دیگر تفاوت زیادی دارد. شما باید با یاد داشته باشید که کنترل کننده های رویداد را مقید کنید. بدون اظهارات سینتکس ناپایدار، کد بسیار شلوغ خواهد بود. مردم می‌تواند prop ها، حالت و جریان رو به بالا و پایین دیتا را به خوبی متوجه شوند ولی هنوز با class ها مشکل دارند. فرق بین کامپوننت های تابعی و class در ری اکت و هنگام استفاده از هر کدام از آنها باعث بروز اختلاف نظرهایی حتی بین برنامه نویسان باتجربۀ React می‌گردد.

به علاوه، الان حدود پنج سال است که ری اکت منتشر شده است و ما می‌خواهیم مطمئن شویم که در پنج سال آینده نیز ری اکت به طور مناسبی کار خواهد کرد. همانطور که Svelte، Angular، Glimmer و بقیه نشان داده‌اند، گردآوری جلوتر از زمان کامپوننت ها، نقاط قوتی برای آینده خواهد بود. مخصوصا وقتی محدود به الگوها نباشد. اخیرا ما با استفاده از Prepack آزمایش هایی روی کامپوننت انجام دادیم و به نتایج اولیۀ مثبتی رسیدیم. ما دیدیم که کامپوننت های class می‌توانند الگوهای غیرعمدی‌ای را تقویت کنند که باعث می‌شود بهینه سازی ها به مسیر کندتری افت کند. همینطور class ها امروز هم مشکلاتی را سبب می‌شوند. برای مثال، class ها چندان خوب خرد نشده و بارگذاری مجدد را غیر قابل اعتماد می‌کنند. ما می‌خواهیم APIی را معرفی کنیم که احتمال ماندن کدها در مسیر بهینه سازی را بیشتر می‌کند.

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

بخش Hooks در یک نگاه، محل خوبی برای شروع یادگیری Hooks است.

استراتژی اتخاذ تدریجی

نکته: برنامه‌ای برای حذف class ها از React نداریم

ما می‌دانیم که برنامه نویسان React روی تولید محصولات متمرکز بوده و وقتی برای نگاه به هر API جدیدی که منتشر می‌شود، ندارند. Hook ها خیلی جدید هستید و شاید بهتر باشد قبل از تصمیم گیری یاد گرفتن آن یا اتخاذ آن، برای مثال‌های بیشتر و آموزش‌هایش صبر کرد.

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

این بسیار مهم است که Hook ها در کنار کدهای موجود کار کرده و در نتیجه می‌تواند به طور تدریجی آنها را اتخاذ کرده و از آنها استفاده کنید. ما این API آزمایشی را به اشتراک می‌گذاریم تا بازخوردهای افرادی را که مایل هستند در شکل‌دهی نسخه‌های آیندۀ ری اکت سهمی داشته باشند، در همین ابتدا دریافت کنیم.

و در نهایت، هیچ عجله‌ای برای مهاجرت به Hooks نیست. توصیۀ ما، اجتناب از هرگونه بازنویسی بزرگ مخصوصا برای کامپوننت های موجود و پیچیدۀ class است. جهت فکر کردن به Hooks نیاز به کمی تغییر ذهنیت است. طبق تجربۀ ما، بهترین راه در ابتدا، تمرین استفاده از Hooks در کامپوننت های جدید و غیرحساس است و اینکه تمام افراد حاضر در تیم شما از کار کردن با آن احساس راحتی داشته باشند. پس از اینکه Hooks را امتحان کردید، لطفا نظرات مثبت و منفی خود را برای ما بفرستید.

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

گام های بعدی

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

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5٫00 out of 5)
Loading...
counter customizable free hit