ریاکت یه کتابخونه متنباز هست که برای ساختن رابط کاربری مخصوصا برنامههای تک صفحهای استفاده میشه. از این کتابخونه برای مدیریت لایه view توی برنامههای وب و موبایل استفاده میشه. توسط Jordan Walke تولید شده که یه مهندس نرمافزار توی شرکت فیسبوک هستش. اولین بار سال ۲۰۱۱ و روی برنامه اینستاگرام مورد استفاده قرار گرفت
JSX یه افزونه با سینتکسی شبیه به XML برای ECMAScript است ( مخفف Javascript XML ) . اگه بخوایم ساده بگیم وظیفه اش اینه که سینتکسی ساده تر از React.createElement دراختیارتون قرار میده, شما میتونید Javascript رو در کنار ساختاری شبیه به HTML داشته باشید.
تو مثال زیر میبینید که نوشته داخل تگ h1 مثل یک تابع Javascript به تابع render تحویل داده میشه.
Element یک شی ساده است که وظیفه داره اون چیزی که روی صفحه نمایش داده میشه رو توصیف کنه حالا ممکنه به صورت یک DOM node باشه یه به صورت componentهای دیگه.Elements میتونن شامل Elements دیگه به عنوان props باشند. ساختن یک Element در React کار ساده و کم دردسریه اما وقتی که ساخته شد هیچ وقت نمیشه تغییرش داد.
تو مثال زیر یک شی که توسط React Element ساخته شده رو میبینیم :
تو سوال قبل یه اشاره کوچیک کردیم که دوتا راه برای ساختن کامپوننت وجود داره.
۱. Function Components: این سادهترین راه برای ساختن یه کامپوننته. یه Pure Javascript Function رو در نظر بگیرید که Props که خودش یه object هست رو به عنوان پارامتر ورودی میگیره و یه React Element به عنوان خروجی برمیگردونه مثل همین مثال پایین:
اگه کامپوننت نیاز به state یا lifecycle methods داشت از کلاس کامپوننتها استفاده میکنیم در غیر این صورت میریم سراغ فانکسن کامپوننتها. با این حال از ورژن 16.8 ریاکت به بعد و با اضافه شدن هوکها به فانکشن کامپوننت ها، شما میتونید از state یا lifecycle methodها یا تمامی فیچرهایی که قبلا فقط در کلاس کامپوننت ها قابل استفاده بود توی فانکشن کامپوننتتون استفاده کنید
React.PureComponent دقیقا مثل React.Component میمونه فقط تنها تفاوتی که داره اینه که برخلاف Component خودش به صورت خودکار متد shouldComponentUpdate رو هندلمیکنه.
وقتی که props یا state در کامپوننت تغییرمیکنه، PureComponent یه مقایسه سطحی روی props و state انجام میده (shallow comparison) در حالیکه Component این مقایسه رو به صورت خودکار انجام نمیده و به طور پیشفرض کامپوننت هربار که shouldCompnentUpdate فراخوانی بشه re-render میشه. بنابراین توی Component باید این متد override بشه.
State در هر کامپوننت یه آبجکته که یه سری اطلاعات که در طول عمر کامپوننت ما ممکنه تغییر کنه رو در خودش ذخیرهمیکنه. ما باید تمام تلاشمون رو بکنیم که stateمون در ساده ترین حالت ممکن باشه و تاجایی که میتونیم تعداد کامپوننتهایی که stateful هستن رو کاهش بدیم. به عنوان مثال بیایید یه کامپوننت User رو که یه state داره بسازیم:
Props ورودی کامپوننتها هستن. میتونن یه مقدار ساده یا یه شی شامل یه مجموعه مقدار باشن که در لحظه ایجاد کامپوننت و بر اساس یه یه قاعده نام گذاری که خیلی شبیه به HTML-tag attributes هست، به کامپوننت پاس داده میشن. در واقع اینها دادههایی هستن که از کامپوننت پدر به فرزند تحویل داده میشن.
هدف اصلی وجود Props در ریاکت ایجاد ساختارهای زیر در یک کامپوننته:
هردو javascript plain object هستن . هردو وظیفه دارن مقادیری که روی render تاثیر گذار هست رو نگه داری کنن اما عملکردشون با توجه به کامپوننت متفاوت خواهد بود. Props شبیه به پارامترهای ورودی یک فانکشن، به کامپوننت پاس داده میشن در حالیکه state شبیه به متغییرهایی که داخل فانکشن ساخته شدن ، توسط خود کامپوننت ایجاد و مدیریت میشه.
callback function زمانی که setState تموم شد و کامپوننت مجددا render شد فراخوانی میشه. از اونجایی که setStateasynchronous یا همون غیرهمزمانه از callback برای کارهایی استفاده میشه که بعد از تابع setState قراره اجرا بشن.
نکته مهم: بهتره که به جای callback از lifecycle method ها استفاده کنیم.
Bind کردن توی Constructor: توی کلاسهای جاواسکریپتی متدها به صورت پیشفرض bound نمیشن. همین موضوع توی کلاس کامپوننتهای ریاکتی برای متدهای موجود هم رخ میده که اکثرا توی متد سازنده یا همون constructor میآییم bind میکنیم.
SyntheticEvent یه رخداد cross-browser هست که بهعنوان یه wrapper دور eventهای اصلی مرورگر هستش. رابط API برای کارکردن با اون عینا مثل رخداد native مرورگرهاست که شامل stopPropagation و preventDefault میشه، با این تفاوت که این رخدادها بر روی همه مرورگرها کار میکنن.
برای بررسی یه شرط میتونیم از عبارت شرطی if استفاده کنیم، البته عملگرهای درون خطی سهگانه(ternary) هم میشه استفاده کرد که از ویژگیهای خود js هستن. جدا از این ویژگیها، میتونیم هر عبارتی داخل آکولاد و توی JSX به اصطلاح embed یا ترکیب کنیم و با عملگر منطقی && ترکیب کنیم، مثال پایینی رو ببنید:
یه key یه attribute ویژه هستش و موقعی که داریم یه آرایه از المانها رو ایجاد میکنیم باید بهشون به عنوان prop بدیمش. Keyها به ریاکت کمک میکنن که بدونه باید کدوم المان رو دقیقا اضافه، حذف یا به روز کنه.
اکثرا از ID یا از یه دیتای یونیک به عنوان key استفاده میکنن:
ref به عنوان یه مرجع برای دسترسی مستقیم به المان موردنظرمون استفاده میشه . تا حد امکان و توی اکثر مواقع بهتره از اونا استفاده نکنیم، البته خیلی میتونن کمک کننده باشن چون دسترسی مستقیمی به DOM element یا instance اصلی component بهمون میدن.
اگه قبلا با ریاکت کار کرده باشین، ممکنه با یه API قدیمی تر آشنا باشین که توی اون ویژگی ref یه رشته ست، مثل ref={'textInput'} و گره DOM به عنوان this.refs.textInput قابل دسترسیه. We advise against it because string refs have below issues, and are considered legacy. String refs were removed in React v16.
اونا ریاکت رو وادار میکنن که عناصر در حال اجرا رو پیگیری کنه. این مساله یکم مشکل سازه چون باعث میشه خطاهای عجیب و غریب وقتی که ماژول ریاکت توی باندل کپی میشه ایجاد بشه.
Virtual DOM (VDOM) یه نماینده in-memory از DOM واقعی هستش. این نماینده از رابط کاربری توی حافظه رم نگهداری میشه و همواره با DOM "واقعی" همگام سازی(sync) میشه. این گام بین تابع رندر و نمایش elementها روی صفحه رخ میده و به مجموعه اتفاقاتی که برای مدیریت این موارد انجام میشه reconciliation میگن.
shadow DOM یه تکنولوژی مرورگره که در درجه اول برای تعیین متغیر ها و css درکامپوننت وب طراحی شده بود. virtual DOM مفهومیه که توسط کتابخونه ها در جاواسکریپت در APIهای مرورگر اجرا شده.
Fiber موتور جدید برای عملیات reconciliation هست یا میشه گفت که پیادهسازی مجدد الگوریتم هسته ریاکت نسخه ۱۶ هست. هدف پیادهسازی ReactFiber برای بهبود کارکرد توی ناحیههایی مثل انیمیشن، layout، کار با gestureها، قابلیت اینکه عملیات در حال اجرا رو متوقف، قطع یا مجددا فعال کنیم و همینطوری اولویتبندی بروزسانیهای لازم توی DOM رو شامل میشد.
هدف پیادهسازی ReactFiber برای بهبود کارکرد توی ناحیههایی مثل انیمیشن، layout، کار با gestureها بود. میشه گفت مهمترین ویژگی incremental-rendering بوده که قابلیت بخشبندی(chunk کردن) عملیات اجرایی و متوقف و اجرا کردن اون توی فریمهای مختلف هست.
کامپوننت های کنترل نشده کامپوننتهایی هستن که state های خودشون رو به صورت داخلی ذخیره می کنند و ما می تونیم با استفاده از یک ref از DOM پرس و جو کنیم تا در صورت نیاز مقدار فعلی اونو پیدا کنیم. این یکم شبیه HTML سنتیه.
در کامپوننت UserProfile زیر، ورودی name با استفاده از ref قابل دسترسیه.
عناصر JSX به توابع React.createElement تبدیل میشن تا عناصر ریاکتی بسازن که برای نمایش شی UI استفاده میشن. درحالی که cloneElement برای کلون کردن یه عنصر و فرستادنش به عنوان prop جدید استفاده میشه.
وقتی که کامپوننتهای مختلف نیاز به یه داده خاص دارن که بین اونا مشترکه بهتره state مشترک رو تا حد امکان به نزدیکترین کامپوننت بالاییشون انتقال بدیم. این مورد به این معنیه که اگه دو کامپوننت فرزند داریم که یه state مشخص رو دارن مدیریت میکنن توی خودشون، اون state رو میبریم توی کامپوننت والد و بجای مدیریت یه state توی دوتا کامپوننت، از یه جا و توی کامپوننت والد اون رو مدیریت میکنیم.
کامپوننت با اولویت بالا (HOC) تابعیه که یه کامپوننت میگیره و یه کامپوننت جدید برمیگردونه. اصولا این الگوییه که از ماهیت تلفیقی ریاکت گرفته شده.
ما اینا رو به عنوان کامپوننت های خالص میشناسیم چون میتونن هر کدوم از کامپوننت های فرزندشون رو که به صورت پویا ارائه شدن بپذیرن ولی هیچ کدوم از رفتارهای کامپوننت های ورودی خودشون رو تغییر نمیدن.
Context روشی رو برای انتقال داده ها بین کامپوننت ها فراهممیکنه بدون اینکه بخوایم توی هر سطح به صورت دستی داده ها رو منتقل کنیم. به عنوان مثال، معتبر بودن کاربر، locale preference، UI theme مواردی هستن که توی خیلی از کامپوننت ها باید در دسترس باشن.
children یه (this.prop.children) prop هستش که بهمون اجازه میده کامپوننت ها رو به عنوان داده به کامپوننت های دیگه انقال بدیم، درست مثل prop های دیگهای که استفاده میکنیم. درخت کامپوننت که بین تگ باز و بسته کامپوننت ها قرار داره به اون کامپوننت به عنوان prop children پاس داده میشه.
تعدادی متد در دسترس توی react API برای کار بااین prop ها وجود داره که شامل React.Children.map، React.Children.forEach، React.Children.count، React.Children.only، React.Children.toArray هستش.
یه مثال ساده از استفاده از children prop این پایین نوشته شده.
کلاس constructor تا زمانی که متد super صدا زده نشده نمیتونه از this استفاده کنه. همین مورد در رابطه با کلاس های فرعی ES6 هم صدقمیکنه. دلیل اصلی انتقال پارامتر های props به متد فراخوان super دسترسی داشتن به this.props توی constructor هستش.
وقتی state یا props یه کامپوننت تغییرمیکنه، ریاکت با مقایسه عنصر تازه return شده و نمونه render شده قبلی تصمیم میگیره که به روزرسانی DOM واقعا ضروریه یا نه. وقتی این دو مقدار با هم برابر نباشه، ریاکت به روزرسانی DOMرو انجام میده. به این فرایند reconciliation میگیم.
نه، تابع React.lazy در حال حاضر فقط خروجی پیش فرض رو پشتیبانیمیکنه. اگه بخوایم ماژولهایی رو import کنیم که به اونا exports گفته میشه، می تونیم یه ماژول واسطه تعریف کنیم که اونا رو به عنوان پیش فرض مجددا تعریفمیکنه. همچنین تضمینمیکنه که tree shaking همچنان به کار خودش ادامه میده و کامپوننت های استفاده نشده رو نمیگیره.
بیاین یه کامپوننتی بنویسیم که چندین کامپوننت رو به عنوان خروجی ارائه میده.
class یه کلمه کلیدی توی جاواسکریپته و JSX پسوند جاواسکریپته. دلیل اصلی اتفاده ریاکت از className به جای class همینه. یه رشته رو به عنوان prop className انتقال میدیم.
یه الگوی رایج توی ریاکت وجود داره که برای کامپوننتی استفاده میشه که چندین عنصر رو برمیگردونن. Fragment ها این امکان رو فراهم میکنن که بتونیم لیستی از فرزندان رو بدون اضافه کردن نود های اضافی به DOM گروه بندی کنیم.
Fragment ها یه کم سریعترن و با ایجاد نکردن DOM node اضافی حافظه کمتری استفاده میکنن. این فقط یه مزیت واقعی روی درخت های بزرگ و عمیق داره.
بعضی از مکانیسم های CSS مثل Flexbox و CSS Grid روابط والد و فرزندی خاصی دارند و اضافه کردن div در وسط ، حفظ طرح مورد نظرمون را دشوارمیکنه.
اگه رفتار یه کامپوننت مستقل از state اون کامپوننت باشه بهش کامپوننت stateless میگیم. می تونیم از یه تابع یا یه کلاس برای ساخت کامپوننت های stateless استفاده کنیم، اما تا زمانی که ما نیاز داریم از هوک چرخه عمر توی کامپوننت هامون استفاده کنیم باید سراغ کامپوننت های تابع بریم. اگه بخوایم اینجا از کامپوننت های تابع استفاده کنیم فواید زیادی داره، راحت نوشته میشه، فهمیده میشه، تست میشه، سریعتره و میتونیم از کلمه کلیدی this هم استفاده نکنیم.
وقتی برنامه توی حالت development یا توسعه هست، ریاکت به شکل خودکار تمام propهایی که ما توی کامپوننت استفاده کردیم رو چک میکنه تا مطمئن بشه همهشون type درستی دارن. اگه هر کدوم از propها type درستی نداشته باشن توی کنسول بهمون یه warning نشون میده، البته توی حالت production این حالت غیر فعاله.
propهای اجباری با پراپرتی isRequired مشخص میشن، همچنین یهسری انواع prop پیشفرض وجود دارن که پایین میاریمشون :
Error boundaryها یا به اصطلاح تحت الفظی مرزهای خطا کامپوننتهایی هستن که خطاهای جاواسکریپت رو هرجایی توی درخت فرزنداش رخ داده باشن catch میکنن و خطای موردنظر رو log میکنن و علاوه براین میتونن یه UI به اصطلاح fallback رو بجای کامپوننت crash شده نشون بدن.
توی یه کلاس کامپوننت با گذاشتن متد componentDidCatch(error, info) یا static getDerivedStateFromError میتونیم یه boundary برای زمانی که خطایی رخ میده درست کنیم. مثل:
به طور معمول ما از کتابخانه propTypes ها (در ورژن ۱۵.۵ ریاکت Rect.propTypes به پکیج react-types انتقال پیدا کرده) برای چک کردن نوع prop در برنامههای ریاکت استفاده میکنیم . برای برنامه ایی با کدهای بیشتر توصیه میشه از _static type checker_هایی مثل flow یا typeScript استفاده بشه که چک کردن رو در زمان کامپایل انجام میده ویژگیهای مثل auto-completion رو ارائه میده.
پکیج react-dom متدهای DOM-specific یا مخصوص DOM رو ارائه میده که میتونه توی سطوح بالای برنامه شما استفاده بشه.
اکثر کامپوننت ها نیازی به استفاده از این ماژولها ندارن. تعدادی از متدهای این پکیج اینها هستن :
این متد برای رندرکردن کامپوننت پاس داده شده، توی یه المنت DOM که به عنوان container پاس داده شده استفاده میشه و یه رفرنس به کامپوننت برمیگردونه. اگه کامپوننت ریاکت قبلا توی container مورد نظر رندر شده باشه با یه update فقط DOMهایی که نیاز به به روز شدن دارن رو رندر میکنه.
ReactDOMServer این امکان رو بهمون میده که کامپوننتها رو به صورت استاتیک رندر کنیم (معمولا روی node server استفاده میشه). ReactDOMServer عمدتا برای پیاده سازی سمت سرور استفاده میشه (SSR).
ویژگی dangerouslySetInnerHTML جایگزین ریاکت واسه استفاده از innerHTML توی DOM مرورگره و کارکردش درست مثل innerHTML هستش، استفاده از این ویژگی به خاطر حملات cross-site-scripting(XSS) ریسک بالایی داره.
برای اینکار باید یه آبجکت innerHTML به عنوان key و یه متن html به عنوان value به این prop بفرستیم(یا شاید همون پاس بدیم).
توی مثال پایینی کامپوننت از ویژگی dangerouslySetInnerHTML برای قرار دادن HTML استفاده کرده.
attribute پیشفزض مورد استفاده برای استایلدهی style هستش که یه object جاواسکریپت رو به عنوان مقدار قبول میکنه که همه propertyهای اون بجای css عادی camelCase هستن. این روش با استایلدهی عادی توی جاواسکریپت یه کم متفاوته و بهینهتر و امنتره، چون جلوی حفرههای امنیتی مثل XSS رو میگیره.
وقتی از setState استفاده میکنیم، جدا از اینکه به یه آبجکت استیتی اختصاص داده میشه ریاکت اون کامپوننت و همه فرزندای اون کامپوننت رو دوباره رندر میکنه. ممکنه این ارور رو بگیرین : شما فقط می تونید کامپوننت mount شده یا در حال mount رو به روز رسانی کنید. پس باید بجای setState از this.state برای مقداردهی state توی constructor استفاده کنیم.
key ها باید پایدار، قابل پیش بینی و منحصر به فرد باشن تا ریاکت بتونه المانها رو قابل رهگیری کنه.
تو کد زیر key هر عنصر براساس ترتیبی که توی لیست داره مقدار قرار می گیره و به دادههایی که میگیرن ربطی نداره. این کار بهینه سازیهایی که میتونه توسط ریاکت انجام بشه رو محدودمیکنه.
توصیه میشه که از مقدار دهی اولیه غیر هم زمان در متد componentWillMount استفاده نشه. componentWillMount درست قبل از mount شدن اجرا میشه و قبل از متد render صدا زده میشه بنابراین setState کردن توی این متد باعث re-render شدن نمیشه. باید از ایجاد هر ساید افکتی توی این متد خودداری کنیم و دقت کنیم که اگه مقدار دهی اولیه غیر هم زمانی داریم این کار رو توی متد componentDidMount انجام بدیم نه در متد componentWillMount.
اگه propهای یه کامپوننت بدون اینکه اون کامپوننت رفرش بشه تغییر کنه، مقدار جدید اون prop نمایش داده نمیشه چون تابع state ،constructor جاری اون کامپوننت رو به روز رسانی نمیکنه، مقدار دهی اولیه state از prop ها فقط زمانی که کامپوننت برای بار اول ساخته شده اجرا میشه.
کامپوننت زیر مقدار به روزرسانی شده رو نشون نمیده :
بعضی وقتا ما می خوایم کامپوننتهای مختلفی رو بسته به بعضی state ها رندر کنیم. JSX مقدار false یا undefined رو رندر نمیکنه، بنابراین ما میتونیم از short-circuiting شرطی برای رندر کردن بخش مشخصی از کامپوننتتون استفاده کنیم در صورتی که اون شرط مقدار true رو برگردونده باشه.
وقتی ما prop هارو spread میکنیم این کارو با ریسک اضافه کردن اتریبیوتهای HTML انجام میدیم که این کار خوبی نیست، به جای این کار میتونیم از ...rest استفاده کنیم که فقط propهای مورد نیاز رو اضافهمیکنه.
می تونیم کلاس کامپوننت ها رو decorate کنیم، که درست مثل پاس دادن کامپوننت ها به تابع هستش. Decorator ها روش قابل خواندن و انعطاف پذیرتری برای تغییر فانکشنالیتی کامپوننتها هستن.
در حال حاظر کتابخانههایی وجود داره که memoize هستن و میتونن توی کامپوننتهای تابع استفاده بشن، به عنوان مثال کتابخونه moize میتونه یه کامپوننت رو توی بقیه کامپوننت ها memoize کنه.
میشه از پلاگین DefinePlugin که روی وبپک قابل استفاده هست استفاده کرد و مقدار NODE_ENV رو روی production ست کرد، با اینکار خطاهای اضافی یا اعتبارسنجی propTypeها روی پروداکشن غیرفعال میشه جدای این موارد، کدهای نوشته شده بهینهسازی میشن و مثلا کدهای بلااستفاده اینا حذف میشن و درنتیجه سرعت بهتری رو میتوته به برنامه بده چون سایز bundle ایجاد شده کوچیکتر خواهد بود.
بعد از اینکه یه کامپوننت بلا فاصله به خوبی قبل rerender شد، متد جدید استاتیک getDerivedStateFromProps صدا زده میشه.
این متد یا state آپدیت شده رو به صورت یه آبجکت برمی گردونه یا null رو برمی گردونه که معنیش اینه propهای جدید به آپدیت شدن state نیازی ندارن.
کامپوننتهای با اولویت بالاتر یا همون هوک ها و render prop ها هر دوشون فقط یه child رو رندر میکنن ولی هوک ها روش راحت تری رو ارائه میدن که از تو در تو بودن توی درخت کامپوننت ها جلوگیری میکنه.
یه کامپوننت switcher کامپوننتیـه که یکی از چندتا کامپوننت موردنظر رو رندر میکنه. لازمه که برای تصمیم گیری بین کامپوننتها از object جاواسکریپتی استفاده کنیم.
برای مثال، کدپایین با بررسی prop موردنظر page بین صفحات مختلف سويیچ میکنه:
دلیلش اینه که setState یه عملیات async یا ناهمزمانه.
state ها در ریاکت به دلایل عملکردی تغییر میکنن، بنابراین یه state ممکنه بلافاصله بعد از اینکه setState صدا زده شد تغییر نکنه.
یعنی اینکه وقتی setState رو صدا می زنیم نباید به state جاری اعتماد کنیم چون نمی تونیم مطمئن باشیم که اون state چی میتونه باشه.
@@ -3198,7 +3861,10 @@
React.StrictMode یه کامپوننت مفید برای هایلایت کردن مشکلات احتمالی توی برنامه ست. <StrictMode> درست مثل <Fragment> هیچ المان DOM اضافهای رو رندر نمیکنه، بلکه warning ها و additional checks رو برای فرزندان اون کامپوننت فعالمیکنه.
این کار فقط در حالت development فعال میشه.
Mixin ها روشی برای جدا کردن کامپوننتهایی با عملکرد مشترک هستن.
Mixin ها نباید استفاده بشن و میتونن با کامپوننتهای با اولویت بالا(HOC) یا decorator ها جایگزین بشن.
یکی از بیشترین کاربردهای mixin ها PureRenderMixin هستش. ممکنه تو بعضی از کامپوننت ها برای جلوگیری از re-renderهای غیر ضروری وقتی prop ها و state با مقادیر قبلی شون برابر هستن از این mixin ها استفاده کنیم:
pointer Event ها یه روش واحدی رو برای هندل کردن همه ی ایونتهای ورودی ارائه میدن.
در زمانهای قدیم ما از موس استفاده میکردیم و برای هندل کردن ایونتهای مربوط به اون از event listener ها استفاده میکردیم ولی امروزه دستگاههای زیادی داریم که با داشتن موس ارتباطی ندارن، مثل قلم ها یا گوشیهای صفحه لمسی.
باید یادمون باشه که این ایونت ها فقط تو مرورگرهایی کار میکنن که مشخصه Pointer Events رو پشتیبانی میکنن.
اگه ما با استفاده از JSX کامپوننتمون رو رندر میکنیم، اسم کامپوننت باید با حرف بزرگ شروع بشه در غیر این صورت ریاکت خطای تگ غیر قابل تشخیص رو میده.
این قرارداد به خاطر اینه که فقط عناصر HTML و تگهای svg می تونن با حرف کوچیک شروع بشن.
بله. در گذشته ریاکت DOM attributeهای ناشناخته رو نادیده میگرفت، اگه JSX رو با یه ویژگیای نوشته بودیم که ریاکت تشخیص نمیداد، اونو نادیده میگرفت. به عنوان مثال:
وقتی داریم از کلاسهای ES6 استفاده میکنیم باید state رو توی constructor مقداردهی اولیه کنیم و وقتی از React.createClass استفاده میکنیم باید از متد getInitialState استفاده کنیم.
در حالت پیش فرض، وقتی state یا prop کامپوننت تغییرمیکنه، کامپوننت دوباره رندر میشه. اگه متد render به دادههای دیگهای وابسته باشه، می تونیم با فراخوانی متد forceUpdate به ریاکت بگیم که این کامپوننت نیازه که دوباره رندر بشه.
خیلی ساده میتونیم از Array.prototype.map با سینتکس arrow function ES6 استفاده کنیم، برای مثال آرایهای از آیتم های یه آبجکت توی آرایهای از کامپوننت ها نوشته میشه:
اگه بخوایم آرایهای از آبجکت ها رو به یه کامپوننت با شکل خاصی پاس بدیم، از React.PropTypes.shape به عنوان یه آرگومان برای React.PropTypes.arrayOf استفاده میکنیم.
بسته ریاکت شامل React.createElement، React.Component، React.Children و helperهای دیگه که مربوطه به کلاس کامپوننتها و المنتها هستش. میتونیم اینا رو به عنوان isomorphic یا universal helpers که واسه ساختن کامپوننت ها نیاز داریم, در نظر بگیریم. بسته react-dom شامل ReactDOM.render میشه و داخل react-dom/server میتونیم با استفاده از متد های ReactDOMServer.renderToString و ReactDOMServer.renderToStaticMarkupserver-side rendering رو پشتیبانی کنیم.
تیم ریاکت سعی کرده تمام ویژگی های مرتبط با DOM رو جدا کنه و اونو تی یه کتابخونه جدا به اسم ReactDom قرار بده. ری اک ورژن ۱۴ اولین نسخه ایه که توی اون کتابخونه ها از هم جدا میشن. با نگاهی به بعضی از بسته های ریاکت مثل react-native، react-art، react-canvas و react-three مشخص میشه که زیبایی و جوهر ریاکت هیچ ربطی به مرورگر ها یا DOM نداره. برای ساختن محیط های بیشتری که ریاکت بتونه رندر بشه، تیم ریاکت قصد داره بسته اصلی ریاکت رو به دو بخش تقسیم کنه: react و react-dom.
از این طریق میشه کامپوننتهایی نوشت که بین ریاکت وب و ریاکت نیتیو قابل اشتراک باشه.
اگه سعی کنیم که با استفاده از for attribute یه عنصر <label> متصل به یه متن رو رندر کنیم، اون وقت ویژگی HTML بودن رو از دست میده و یه خطا توی کنسول بهمون نشون میده.
می تونید به رخداد resize توی componentDidMount گوش کنیم و ابعاد(width و height) رو تغییر بدین. البته حواستون باشه که این listener رو باید توی متد componentWillUnmount حذفش کنیم.
وقتی که از متد setState فعلی و قبلی با هم ترکیب میشدند. replaceState حالت فعلی رو نشون میده و با stateای میخواییم جایگزینش میکنه. معمولا setState برای این استفاده میشه که بنا به دلیلی بخواییم همه کلیدهای قبلی رو پاک کنیم. البته میشه بجای استفاده از replaceState با استفاده از setState بیاییم و state رو برابر با false یا null قرار بدیم.
متدی که معرفی میشه در کلاس کامپوننتها هنگام به روز شدن state فراخوانی میشه. با استفاده از این متد میشه state و prop فعلی رو با مقادیر جدید مقایسه کرده و یه سری کار که مدنظر داریم رو انجام بدیم.
فلسفه ساختاری ریاکت طوریه که propها باید immutable باشن و بالا به پایین و به صورت سلسهمراتبی مقدار بگیرند. به این معنی که پدر هر کامپوننت میتونه هر مقداری رو به فرزند پاس بده و فرزند حق دستکاری اونو نداره.
ریاکت اجازه ترکیب کردن تغییرات state رو با استفاده از متد setState فراهم کرده است که باهث بهبود پرفورمنس میشه. چون this.props و this.state ممکنه به صورت asynchronous و همزمان به روز بشن، نباید به مقدار اونا برای محاسبه مقدار بعدی اعتماد کرد.
برای مثال به این شمارنده که درست کار نمیکنه دقت کنیم:
همه کامپوننتهای ریاکت لازم هست که با حرف بزرگ شروع بشن ولی در این مورد نیز یکسری استثناها وجود داره. تگهایی که با property و عملگر dot کار میکنن به عنوان کامپوننتهای با حرف کوچک تلقی میشن.
For example the below tag can be compiled to a valid component,
الگوریتم reconciliation ریاکت بعد از رندر کردن کامپوننت با بررسی رندرهای مجدد، بررسی میکنه که این کامپوننت قبلا رندر شده یا نه و اگه قبلا رندر شده باشه بر روی همون instance قبلی رندر رو انجام میده و instance جدیدی ساخته نمیشه پس تابع سازنده هم تنها یکبار صدا زده میشه.
میتونیم از ref برای بدست آوردن رفرنس HTMLInputElement مورد نظر استفاده کنیم و object بدست اومده رو توی یه متغیر یا property نگهداری کنیم، بعدش از اون رفرنس میتونیم برای اعمال رخداد کلیک استفاده کنیم
که HTMLElement.click رو فراخوانی میکنه. این فرآیند توی دو گام قابل انجام هستش:
اگه بخواییم از async/await توی ریاکت استفاده کنیم، لازمه که Babel و پلاگین transform-async-to-generator رو استفاده کنیم. توی React Native اینکار با Babel و یه سری transformها انجام میشه.
خیلی توصیه میشه که از استایلدهیهای سخت و مستقیم برای کامپوننتها پرهیز کنیم. هرمقداری که فقط در یک کامپوننت خاصی مورد استفاده قرار میگیره، بهتره که درون همون فایل لود بشه.
برای مثال، این استایلها میتونن تو یه فایل دیگه انتقال پیدا کنن:
ESLint یه linter برای JavaScript هستش۰. یه سری کتابخونه برای کمک به کدنویسی تو سبکهای مشخص و استاندارد برای eslint وجود داره. یکی از معروفترین پلاگینهای موجود eslint-plugin-react هست.
به صورت پیشفرض این پلاگین یه سری از best practiceها رو برای کدهای نوشته شده بررسی میکنه. با مجموعهای از قوانین برای . پلاگین مشهور دیگه eslint-plugin-jsx-a11y هستش، که برای مسائل معروف در زمینه accessibility کمکمیکنه. چرا که JSX یه سینتکس متفاوتتری از HTML ارائه میکنه، مشکلاتی که ممکنه مثلا با alt و tabindex پیش میاد رو با این پلاگین میشه متوجه شد.
میتونیم از کتابخونههای AJAX مثل Axios یا حتی از fetch که به صورت پیشفرض تو مرورگر وجود داره استفاده کنیم. لازمه که توی Mount درخواست API رو انجام بدیم و برای به روز کردن کامپوننت میتونیم از setState استفاده کنیم تا داده بدست اومده رو توی کامپوننت نشون بدیم.
برای مثال، لیست کارمندان از API گرفته میشه و توی state نگهداری میشه:
Render Props یه تکنیک ساده برای به اشتراک گذاری کد بین کامپوننتهاست که با استفاده از یه prop که یه تابع رو بهش دادیم انجام میشه. کامپوننت زیر از همین روش برای پاس دادن یه React element استفاده میکنه.
React Router یه کتابخونه قدرتمند برای جابجایی سریع بین صفحات و flowهای مختلفه که برپایه ریاکت نوشته شده و امکان sync کردن آدرس وارد شده با صفحات رو توی محیطهای مختلف فراهم میکنه.
React Router یک wrapper روی کتابخونه history هستش که اعمال اجرایی بر روی window.history رو با استفاده از ابجکتهای hash و browser مدیریت میکنه. البته این کتابخونه یک نوع دیگه از historyها به اسم memory history رو هم معرفی میکنه که برای محیطهایی که به صورت عمومی از history پشتیبانی نمیکنن کاربرد داره. مثل محیط توسعه برنامه موبایل با (React Native) یا محیطهای unit test و Nodejs.
کامپوننت <Switch> اولین فرزند <Route>ای که با درخواست موجود تطابق داشته باشه رو رندر میکنه. از اونجایی که یه <Route> بدون path یا با path * همیشه مطابق با درخواست است، پس هنگام خطای ۴۰۴ این مورد برای رندر استفاده میشه.
پکیج react-router مکان استفاده از کامپوننت <Redirect> رو توی React Router میده. رندر کردن <Redirect> باعث جابجایی به مسیر پاس داده شده بهش میشه. مثل ریدایرکت سرور-ساید، مسیر جدید با path فعلی جایگزین میشه.
React Intl یه کتابخونه برای راحت کردن کار با برنامههای چند زبانهست. این کتابخونه از مجموعهای از کامپوننتها و APIها برای فرمتبندی string، date و اعداد برای سهولت چندزبانگی استفاده میکنه. React Intl بخشی از FormatJS هست که امکان اتصال به ریاکت رو با کامپوننتهای خودش فراهم میکنه.
کامپوننت <Formatted... /> از react-intl بجای بازگرداندن string یه المنت برگشت میده و به همین دلیل نمیشه ازش به عنوان placeholder یا alt و... استفاده کرد. اگه جایی لازم شد یه پیامی رو اینجور جاها استفاده کنیم باید از formatMessage استفاده کنیم. میتونیم شي intl رو با استفاده از HOC injectIntl به کامپوننت موردنظر inject کنیم و بعدشم میتونیم از متد formatMessage روی این شي استفاده کنید.
با استفاده از HOC injectIntl میتونیم به متد formatDate توی کامپوننت خودمون دسترسی داشته باشیم. این متد به صورت داخلی توسط FormattedDate استفاده میشه و مقدار string تاریخ فرمت بندی شده رو برمیگردونه.
Shallow rendering برای نوشتن یونیت تست توی ریاکت کاربرد داره. این روش بهمون این امکان رو میده که به عمق یک مرتبه کامپوننت موردنظرمون رو رندر کنیم و مقدار بازگردانی شده رو بدون اینکه نگران عملکرد کامپوننتهای فرزند باشیم، ارزیابی کنیم.
این پکیج یه renderer معرفی میکنه که میتونیم ازش برای رندر کردن کامپوننتها و تبدیل اونا به یه آبجکت pure JavaScript استفاده کنیم بدون اینکه وابستگی به DOM یا محیط اجرایی موبایلی داشته باشیم. این پکیج گرفتن snapshot از سلسله مرتب view(یه چیزی شبیه به درخت DOM) که توسط ReactDOM یا React Native درست میشه رو بدون نیاز به مرورگر یا jsdom فراهم میکنه.
Jest یه فریمورک برای یونیت تست کردن جاواسکریپت هستش که توسط فیس بوک و براساس Jasmine ساخته شده. Jest امکان ایجاد اتوماتیک mock(دیتا یا مقدار ثابت برای تست) و محیط jsdom رو فراهم میکنه و اکثرا برای تست کامپوننتها استفاده میشه.
Flux یه الگوی طراحی برنامه است که به عنوان جایگزینی برای اکثر پترنهای MVC سنتی به کار میره. در حقیقت یه کتابخونه یا فریمورک نیست و یه معماری برای تکمیل کارکرد ریاکت با مفهوم جریان داده یک طرفه(Unidirectional Data Flow) به کار میره. فیسبوک از این پترن به شکل داخلی برای توسعه ریاکت بهره میگیره.
جریان کار بین dispatcher، storeها و viewهای کامپوننتها با ورودی و خروجی مشخص به شکل زیر خواهد بود:
Redux یه state manager(مدیریت کننده حالت) قابل پیشبینی برای برنامههای جاواسکریپتیه که برپایه دیزاین پترن Flux ایجاد شده. Redux میتونه با ریاکت یا هر کتابخونه دیگهای استفاده بشه. کم حجمه (حدود 2کیلوبایت) و هیچ وابستگی به کتابخونه دیگهای نداره.
یک مرجع کامل و همواره درست: حالت موجود برا کل برنامه در یک درخت object و توی یه store نگهداری میشه. این یکی بودن store باعث میشه دنبال کردن تغییرات در طول زمان و حتی دیباگ کردن برنامه سادهتر باشه.
بجای گفتن کاستیها بیایین مواردی که میدونیم موقع استفاده از Redux بجای Flux داریم رو بگیم:
باید یاد بگیریم که mutation انجام ندیم: Flux در مورد mutate کردن داده نظری نمیدهد، ولی Redux از mutate کردن داده جلوگیری میکنه و پکیجهای مکمل زیادی برای مطمئن شدن از mutate نشدن state توسط برنامهنویس ایجاد شدهاند. این مورد رو میشه فقط برای محیط توسعه با پکیجی مثل redux-immutable-state-invariant، Immutable.js یا آموزش تیم برای نوشتن کد بدون mutate دیتا محقق کرد.
Dispatch کردن action توی reducer یه آنتی پترن محسوب میشه. reducer نباید هیچ سایدافکتی داشته باشه، فقط باید خیلی ساده state قبلی و action فعلی رو بگیره و state جدید رو بده. اینکار رو اگه با افزودن یه سری listeners و dispatch کردن با تغییرات reducer هم انجام بدیم باز باعث ایجاد actionهای تودرتو میشه و میتونه ساید افکت داشته باشه،
لازمه که store رو از یه ماژول که با createStore ایجاد شده بارگذاری کنیم. البته حواسمون باشه برای انجام این مورد نباید اثری روی window به شکل global ایجاد کنیم.
const store =createStore(myReducer);
@@ -4637,7 +5528,10 @@
این دو کتابخونه خیلی متفاوتن و برای اهداف متفاوتی استفاده میشن، ولی یه سری تشابههای ریزی دارن.
Redux یه ابزار برای مدیریت state توی کل برنامهست. اکثرا هم به عنوان یه معماری برای ایجاد رابط کاربری استفاده میشه. RxJS یه کتابخونه برای برنامهنویسی reactive(کنش گرا) هستش. اکثرا هم برای انجام تسکهای asynchronous توی جاواسکریپت به کار میره. میتونیم بهش به عنوان یه معماری بجای Promise نگاه کنیم. Redux هم از الگوی Reactive استفاده میکنه چون Store ریداکس reactive هستش. Store میاد actionها رو از دور میبینه و تغییرات لازم رو توی خودش ایجاد میکنه. RxJS هم از الگوی Reactive پیروی میکنه، ولی بجای اینکه خودش این architecture رو بسازه میاد به شما یه سری بلاکهای سازنده به اسمObservable میده که باهاش بتونید الگوی reactive رو اجرا کنید. فهرست
لازمه که توی برنامه یه root reducer تعریف کنیم که وظیفه معرفی ریدیوسرهای ایجاد شده با combineReducers را دارد.
مثلا بیایین rootReducer رو برای ست کردن state اولیه با فراخوانی عمل USER_LOGOUT تنظیم کنیم. همونطوری که میدونیم، به صورت پیشفرض ما بنا رو براین میزاریم که reducerها با اجرای مقدار undefined به عنوان پارامتر اول initialState رو برمیگردونن و حتی actionش هم مهم نیست.
کاراکتر(symbol) @ در حقیقت یه نماد از جاواسکریپت برای مشخص کردن decoratorهاست. Decorators این امکان رو بهمون میده که بتونیم برای کلاس و ویژگیهای(properties) اون یادداشتها و مدیریتکنندههایی رو توی زمان طراحی اضافه کنیم.
بزارین یه مثال رو برای Redux بزنیم که یه بار از decorator استفاده کنیم و یه بار بدون اون انجامش بدیم.
میتونیم از Context برای استفاده از state توی مراحل داخلی کامپوننتهای nested استفاده کنیم و پارامترهای مورد نظرمون رو تا هر عمقی که دلخواهمون هست ببریم و استفاده کنیم، که البته context برای همین امر به وجود اومده. این درحالیه که Redux خیلی قدرتمندتره و یه سری ویژگیهایی رو بهمون میده که نداره هنوز. بعلاوه، خود React Redux به شکل داخلی از context استفاده میکنه ولی به شکل عمومی این موضوع رو نشون نمیده.
Reducerها همیشه یه مجموعه از stateها رو جمعآوری و تحویل میدن(براساس همه actionهای قبلی). برا همین، اونا به عنوان یه سری کاهندههای state عمل میکنن. هر وقت یه reducer از Redux فراخوانی میشه، state و action به عنوان پارامتر پاس داده میشن و بعدش این state بر اساس actionجاری مقادیرش کاهش یا افزایش داده میشوند و بعدش state بعدی برگشت داده میشه. یعنی شما میتونین یه مجموعه از دادهها رو reduce که به state نهایی که دلخواهتون هست برسین.
بهترین روش برای دسترسی به store و انجام عملیات روی اون استفاده از تابع connect هستش که یه کامپوننت جدید ایجادمیکنه که کامپوننت جاری توی اون قرار داره و دیتای لازم رو بهش پاس میده. این پترن با عنوان Higher-Order Components یا کامپوننتهای مرتبه بالاتر شناخته میشه و یه روش مورد استفاده برای extend کردن کارکرد کامپوننتهای ریاکتی محسوب میشه. این تابع بهمون این امکان رو میده که state و actionهای مورد نظرمون رو به داخل کامپوننت بیاریم و البته به شکل پیوسته با تغییرات اونا کامپوننتمون رو به روز کنیم.
بیایین یه مثال از کامپوننت <FilterLink> با استفاده از تابع connect بزنیم:
Component یه کامپوننت class یا function هست که لایه ظاهری و مربوط به UI برنامه شما توی اون قرار میگیره.
Container یه اصطلاح غیررسمی برای کامپوننتهایی هست که به store ریداکس وصل شدن. Containerها به state subscribe میکنن یا actionها رو dispatch میکنن و هیچ DOM elementای رو رندر نمیکنن بلکه کامپوننتهای UI رو به عنوان child به روز میکنن.
نکته مهم : استفاده از این روش تقریبا توی سال ۲۰۱۹ دیگه منقضی محسوب میشه و چون هوکهای ریاکت خیلی راحت میتونن دیتا رو توی هر سطح از کامپوننت برامون لود کنن، پس جدا نشدن این دولایه تاثیر چشمگیری توی ساده بودن کدها نخواهد داشت و بعضا حتی میتونه کار رو سختتر کنه، پس به عنوان مترجم توصیه میکنم این کار رو انجام ندین 😃
Constantها یا موارد ثابت بهتون این اجازه رو میدن که کارکرد یه عملکرد مشخص رو به سادگی توی پروژه پیدا کنید. البته از خطاهای سادهای که ممکنه براتون پیش بیاد هم جلوگیری میکنه. مثل خطاهای مربوط به type یا ReferenceErrorها که ممکنه خیلی راحت رخ بدن.
اکثرا مقادیر ثابت constant رو توی یه فایل مثل (constants.js یا actionTypes.js) قرار میدیم.
اگه پارامتر ownProps ارائه شده باشه, ReactRedux پارامترهایی که به کامپوننت پاس داده شدن رو به تابع connect پاس میده. پس اگه یه کامپوننت connect شده مثل کد زیر داشته باشین:
redux-saga یه کتابخونه هست که تمرکز اصلیش برای ایجاد side-effectهاست (چیزهای asynchronous مثل fetch کردن داده و غیرشفاف مثل دسترسی به کش مرورگر) که توی برنامههای React/Redux با این روش سادهتر و بهتر انجام میشه.
Saga مثل یه thread جداگانه برای برنامه عمل میکنه و فقط برای مدیریت ساید افکت کارایی داره. redux-saga یه میانافزار برای ریداکس هستش، که به معنی اینه که میتونه به صورت اتوماتیک توسط actionهای ریداکس شروع بشه، متوقف بشه و یا کار خاصی انجام بده. این میانافزار به کل store ریداکس و actionهایی که کار میکنن دسترسی داره و میتونه هر action دیگهای رو dispatch کنه.
هر دوی افکتهای call و put سازندههای افکت هستن. تابع call برای ایجاد توضیح افکت استفاده میشه که به میانافزار دستور میده منتظر call بمونه. تابع put یه افکت ایجاد میکنه، که به store میگه یه action خاص رو فقط اجرا کنه.
بزارین یه مثال در مورد عملکرد این دوتا افکت برای دریافت داده یه کاربر بزنیم.
میان افزار Redux Thunk بهمون این اجازه رو میده که actionهایی رو بسازیم که بهجای action عادی تابع برگردونن thunk میتونه به عنوان یه ایجاد کننده delay برای dispatch کردن یه action استفاده کنیم، یا حتی با بررسی یه شرط خاص یه action رو dispatch کنیم. تابعی که توی action استفاده میشه و dispatch و getState رو به عنوان پارامتر ورودی میگیره.
هر دوی ReduxThunk و ReduxSaga میتونن مدیریت ساید افکتها رو به دست بگیرن. توی اکثر سناریوها، Thunk از Promise استفاده میکنه، درحالیکه Saga از Generatorها استفادهمیکنه. Thunk تقریبا سادهتره و promise رو تقریبا همه دولوپرها باهاش آشنا هستن، Sagas/Generators خیلی قویتر هستن و میتونن کاربردیتر باشن ولی خب لازمه که یاد بگیرینش. هردوی میانافزارها میتونن خیلی مفید باشن و شما میتونین با Thunks شروع کنین و اگه جایی دیدین نیازمندیتون رو برآورده نمیکنه سراغ Sagas برید.
ReduxDevTools یه محیط برای مشاهده در لحظه تغییرات ریداکس فراهم میکنه و قابلیت اجرای مجدد action و یه رابط کاربری قابل شخصیسازی رو فراهم میکنه. اگه نمیخوایین پکیج ReduxDevTools رو نصب کنید میتونین از افزونه ReduxDevTools برای Chrome و Firefox استفاده کنین.
ReduxForm با ریاکت و ریداکس کار میکنه تا همه اطلاعات فرمها رو توی state ریداکس مدیریت کنیم. ReduxForm میتونه با inputهای خام HTML5 هم کار کنه، ولی با فریمورکهای معروف UI مثل Material، ReactWidgets و ReactBootstrap کار کنه.
Relay و Redux توی این مورد که دوتاشونم از یه store استفاده میکنن شبیه بهم هستن. تفاوت اصلی این دو اینه که relay فقط stateهایی رو مدیریت میکنه که از سرور تاثیر گرفتن و همه دسترسیهایی که به state مربوطه رو با کوئریهای GraphQL(برای خوندن دادهها) و mutationها (برای تغییرات داده) انجام میده. Relay دادهها برای شما رو cache میکنه و گرفتن داده از سرور رو برای شما بهینه میکنه. چون فقط تغییرات رو دریافت میکرد و نه چیز دیگهای.
React یه کتابخونه جاواسکریپتی هست که از اجرای اون روی frontend و اجرای اون روی سرور برای تولید رابط کاربری و برنامههای تحت وب پشتیبانی میکنه.
React Native یه فریمورک موبایل هست که کدها رو به کامپوننتهای native روی موبایل compile میکنه و بهمون این اجازه رو میده که برنامههای موبایلی(iOS, Android, and Windows) رو با استفاده از جاواسکریپت بسازیم که از ریاکت برای تولید کامپوننت استفاده میکنه.
ReactNative میتونه توی شبیهسازهای سیستمعاملهای موبایلی مثل iOS و Android تست کرد. میتونیم برنامههای خودمون رو توی برنامه expo(https://expo.io) توی گوشی خودمون هم ببینیم که با استفاده از QR-code میتونه یه برنامه روی کامپیوتر و گوشی sync کنه، البته باید هر دوی این دستگاهها تو یه شبکه وایرلس باشه.
میتونیم از console.log، console.warn و غیره استفاده کرد. از نسخه ReactNative 0.29 میتونیم خیلی ساده کدهای زیر رو اجرا کنیم که لاگ رو توی خروجی ببینیم:
Reselect یه کتابخونه selector برای ریداکس هست که از مفهوم memoization استفاده میکنه. این کتابخونه به صورت اولیه نوشته شده بوده که دادههای هر برنامه Redux-like یا شبیه ریداکس رو پردازش کنه، ولی نتونسته با هیچ برنامه یا کتابخونه دیگهای گره بخوره.
Reselect یه کپی از آخرین inputs/outputs از هر فراخوانی رو نگهداری میکنه و فقط زمانی اونو دوباره محاسبه میکنه که تغییراتی توی ورودی رخ داده باشه. اگه همون ورودیها دوبار استفاده بشن، Reselect مقدار cache شده رو برمیگردونه. memoization و cacheای که استفاده میشه تا حد زیادی قابل شخصی سازیه.
Flow یه static type checker هستش که طراحی شده تا خطاهای مربوط به نوعها رو توی جاواسکریپت پیدا کنیم. نوعهای flow میتونه خیلی ریزبینانهتر از رویکردهای سنتی بررسی نوع عمل کنه. برای مثال، Flow بهمون کمکمیکنه که خطاهای مربوط به دریافت null توی برنامه رو کنترل کنیم که توی روشهای سنتی غیرممکنه تقریبا.
Flow یه ابزار تجزیه و تحلیل استاتیک (static-checker) هستش که از ویژگیهای بالاتر از زبان استفاده میکنه و بهمون کمکمیکنه که به بخشهای مختلف برنامه نوع اضافه کنیم و خطاهایی که مرتبط با بررسی نوعها هست رو موقع compile ازشون جلوگیری کنیم. PropTypes یه روش بررسی نوع ساده (موقع runtime) هست که روی ریاکت اضافه شده. به غیر از نوعهایی که به کامپوننت موردنظر به عنوان prop داده شده رو نمیتونه بررسی کنه. پس اگه دنبال یه روش برای بررسی نوع منعطف هستیم که توی کل پروژه عمل کنه Flow یا TypeScript روشهای بهتری هستن.
ReactDeveloperTools بهمون اجازه اینو میده که سلسله مراتب کامپوننتهای برنامه رو بررسی کنیم و شامل prop و state هم میشه. این مورد به دو روش افزونه (برای Chrome و Firefox) و یه برنامه جانبی مستقل (که با سافاری و مرورگرهای دیگه هم کار میکنه) در دسترسه.
اگه یه فایل محلی HTML رو توی مرورگر باز کنیم (file://...) بعدش لازمه که ChromeExtensions یا همون افزونههای کروم رو باز کنیم و چکباکس Allow access to file URLs رو فعال کنیم.
موقع بارگیری صفحه، React DevTools یه گلوبال به اسم __REACT_DEVTOOLS_GLOBAL_HOOK__ تنظیم میکنه، بعدش ریاکت موقع مقدار دهی اولیه با اون هوک ارتباط برقرار میکنه. اگه وب سایت از ریاکت استفاده نکنه یا ریاکت نتونه با DevTools ارتباط برقرار کنه اون تب رو نشون نمیده.
styled-components یه کتابخونه جاواسکریپته برای طراحی ظاهر برنامه های ریاکت. نقشه برداری بین استایل ها و کامپوننت ها رو حذف میکنه و بهمون این امکان رو میده که css واقعی رو با جاواسکریپت بنویسیم.
اکشن ها آبجکت های ساده جاواسکریپت یا اطلاعاتی هستن که داده ها رو از برنامه به store میفرستن. اونا تنها منابع اطلاعاتی برای store هستن. اکشن باید یه ویژگی type داشته باشه که نوع اکشنی که انجام میشه رو نشون بده.
برای مثال اکشنی که نشون میده یه آیتم todo جدید اضافه شده:
ریداگس میتونه به عنوان یه ذخیره داده برای لایه UI استفاده بشه. رایج ترین کاربرد ریداکس برای ریاکت و ریاکت نیتیو هستش، ولی اتصالاتی هم برای Angular، Angular 2، Vue، Mithril و موارد دیگه موجوده. ریداکس به راحتی یه مکانیسم اشتراکی ارائه میده که میتونه برای کد های دیگه هم استفاده بشه.
ریداکس در اصل توی ES6 نوشته شده و برای تولید توی ES5 با Webpack و Babel منتشر شده. ما باید بتونیم بدون توجه به مراحل ساخت جاواسکریپت از اون استفاده کنیم. ریداکس همینطور یه ساختار UMD ارائه میده که میتونه مستقیم و بدون هیچگونه مراحل ساخت مورد استفاده قرار بگیره.
میتونیم SVG رو مستقیما به عنوان یه کامپوننت به جای لود کردنش به عنوان یه فایل ایمپورت کنیم. این ویژگی توی react-scripts@2.0.0 و ورژن های بالاتر در دسترسه.
import{ ReactComponent as Logo }from'./logo.svg'
@@ -5491,7 +6550,10 @@
اگه ref callback به عنوان یه تابع درون خطی تعریف بشه، در طول به روزرسانی دو بار فراخوانی میشه، یه بار با مقدار null و بعد دوباره با عنصر DOM. این موضوع به خاطر اینه که یه نمونه جدیدی از تابع با هر بار رندر ساخته میشه، پس ریاکت باید ref قبلی رو پاک کنه و یه نمونه جدید ایجاد کنه.
مفهوم render hijacking توانایی کنترل اینه که چه کامپوننتی خروجی بقیه کامپوننت هاست. در واقع به این معنیه که ما می تونیم با قرار دادن کامپوننت خودمون توی یه کامپوننت با اولویت بالا یه تغییراتی بهش بدیم، مثلا یه سری prop بهش اضافه کنیم یا تغییرات دیگه ای که باعث تغییر منطق رندر بشه. این در واقع hijacking رو فعال نمیکنه اما با استفاده ار HOC این امکان رو فراهم میکنیم که کامپوننت رفتار متفاوتی داشته باشه.
دو روش اصلی برای اجرای HOC ها توی ریاکت وجود داره. 1. Props Proxy (PP) و 2. Inheritance Inversion (II). اونا روش های مختلفی رو برای اداره کردن WrappedComponent دنبال می کنن.
Props Proxy
تو این روش، متد رندر HOC یه عنصر ریاکت از نوع WrappedComponent رو برمی گردونه. ما هم prop هایی که HOC دریافت میکنه رو انتقال میدیم، به خاطر همین بهش میگیم Props Proxy.
این به تصمیم توسعه دهنده بستگی داره. به عنوان مثال این وظیفه توسعه دهنده ست که بررسی کنه چه نوعی از state ها برنامه رو تشکیل بده و هر state کجا باید قرار بگیره. بعضی از کاربرا ترجیح میدن هر قسمت از داده رو توی ریداکس نگه دارن، تا همیشه یه ورژن پشت سر هم و کنترل شده از برنامه شون رو داشته باشن. یه عده دیگه ترجیح میدن UI State یا non-critical رو نگه دارن، مثل “is this dropdown currently open”، توی state داخلی یه کامپوننت.
اینا قوانینی هستن که تعیین می کنن چه نوع داده ای باید توی ریداکس قرار بگیره
ریاکت به صورت پیش فرض و بدون هیچگونه پیکربندی، یه سرویس دهنده برامون ایجاد میکنه. سرویس دهنده یه API وب هستش که در ذخیره کردن asset ها و فایل های دیگه بهمون کمک میکنه تا وقتی کاربر آفلاینه یا سرعت اینترنتش پایینه، بازم بتونه نتایج رو روی صفحه ببینه. به این ترتیب بهمون کمک میکنه تجربه کاربری بهتری ایجاد کنیم و همون چیزیه که باید در مورد service worker ها بدونیم. این ها همه مواردی بود در رابطه با اضافه کردن قابلیت های آفلاین به سایتمون.
Class components can be restricted from rendering when their input props are the same using PureComponent or shouldComponentUpdate. Now you can do the same with function components by wrapping them in React.memo.
The React.lazy function lets you render an dynamic import as a regular component. It will automatically load the bundle containing the OtherComponent when the component gets rendered. This must return a Promise which resolves to a module with a default export containing a React component.
You can compare current value of the state with an existing state value and decide whether to rerender the page or not. If the values are same then you need to return null to stop rerendering otherwise return the latest state value. For example, the user profile information is conditionally rendered as follows,
Arrays: Unlike older releases, you don't need to make sure render method return a single element in React16. You are able to return multiple sibling elements without a wrapping element by returning an array. For example, let us take the below list of developers,
React Class Components can be made much more concise using the class field declarations. You can initialize local state without using the constructor and declare class methods by using arrow functions without the extra need to bind them. Let's take a counter example to demonstrate class field declarations for state without using constructor and methods without binding,
Call Hooks only at the top level of your react functions. i.e, You shouldn’t call Hooks inside loops, conditions, or nested functions. This will ensure that Hooks are called in the same order each time a component renders and it preserves the state of Hooks between multiple useState and useEffect calls.
React team released an ESLint plugin called eslint-plugin-react-hooks that enforces these two rules. You can add this plugin to your project using the below command,
Below are the main benefits of React Router V4 module,
In React Router v4(version 4), the API is completely about components. A router can be visualized as a single component() which wraps specific child router components().
Error boundaries do not catch errors inside event handlers. Event handlers don't happened or invoked during rendering time unlike render method or lifecycle methods. So React knows how to recover these kind of errors in event handlers.
If still you need to catch an error inside event handler, use the regular JavaScript try / catch statement as below
Try catch block works with imperative code whereas error boundaries are meant for declarative code to render on the screen.
For example, the try catch block used for below imperative code
In React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree. The reason behind this decision is that it is worse to leave corrupted UI in place than to completely remove it. For example, it is worse for a payments app to display a wrong amount than to render nothing.
Apart from error messages and javascript stack, React16 will display the component stack trace with file names and line numbers using error boundary concept. For example, BuggyCounter component displays the component stack trace as below,
No, it is not mandatory. i.e, If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.
The defaultProps are defined as a property on the component class to set the default props for the class. This is used for undefined props, but not for null props. For example, let us create color default prop for the button component,
This lifecycle method is invoked after an error has been thrown by a descendant component. It receives the error that was thrown as a parameter and should return a value to update state. The signature of the lifecycle method is as follows,
The displayName string is used in debugging messages. Usually, you don’t need to set it explicitly because it’s inferred from the name of the function or class that defines the component. You might want to set it explicitly if you want to display a different name for debugging purposes or when you create a higher-order component.
For example, To ease debugging, choose a display name that communicates that it’s the result of a withSubscription HOC.
React supports all popular browsers, including Internet Explorer 9 and above, although some polyfills are required for older browsers such as IE 9 and IE 10. If you use es5-shim and es5-sham polyfill then it even support old browsers that doesn't support ES5 methods.
This method is available from react-dom package and it removes a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns true if a component was unmounted and false if there was no component to unmount.
The method signature would be as follows,
Code-Splitting is a feature supported by bundlers like Webpack and Browserify which can create multiple bundles that can be dynamically loaded at runtime. The react project supports code splitting via dynamic import() feature.
For example, in the below code snippets, it will make moduleA.js and all its unique dependencies as a separate chunk that only loads after the user clicks the 'Load' button. moduleA.js
The Fragments declared with the explicit <React.Fragment> syntax may have keys. The general usecase is mapping a collection to an array of fragments as below,
As of React 16, both standard or custom DOM attributes are fully supported. Since React components often take both custom and DOM-related props, React uses the camelCase convention just like the DOM APIs. Let us take few props with respect to standard HTML attributes,
<divtabIndex="-1"/>// Just like node.tabIndex DOM API
@@ -6151,7 +7327,10 @@
React.forwardRef accepts a render function as parameter and DevTools uses this function to determine what to display for the ref forwarding component. For example, If you don't name the render function or not using displayName property then it will appear as ”ForwardRef” in the DevTools,
If you pass no value for a prop, it defaults to true. This behavior is available so that it matches the behavior of HTML. For example, below expressions are equivalent,
Next.js is a popular and lightweight framework for static and server‑rendered applications built with React. It also provides styling and routing solutions. Below are the major features provided by NextJS,
If you use an event handler such as onClick or onScroll and want to prevent the callback from being fired too quickly, then you can limit the rate at which callback is executed. This can be achieved in the below possible ways,
Throttling: Changes based on a time based frequency. For example, it can be used using _.throttle lodash function
React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. For example, you can embed user input as below,
const name = response.potentiallyMaliciousInput;
@@ -6301,7 +7501,10 @@
You can update UI(represented by rendered element) by passing the newly created element to ReactDOM's render method. For example, lets take a ticking clock example, where it updates the time by calling render method multiple times,
When you call setState() in the component, React merges the object you provide into the current state. For example, let us take a facebook user with posts and comments details as state variables,
During iterations or loops, it is common to pass an extra parameter to an event handler. This can be achieved through arrow functions or bind method. Let us take an example of user details updated in a grid,
<buttononClick={(e)=>this.updateUser(userId, e)}>Update User details</button>
@@ -6371,7 +7583,10 @@
Keys used within arrays should be unique among their siblings but they don’t need to be globally unique. i.e, You can use the same keys withtwo different arrays. For example, the below book component uses two arrays with different arrays,
Formik is a form library for react which provides solutions such as validation, keeping track of the visited fields, and handling form submission. In detail, You can categorize them as follows,
In React, it is recommend using composition instead of inheritance to reuse code between components. Both Props and composition give you all the flexibility you need to customize a component’s look and behavior in an explicit and safe way.
Whereas, If you want to reuse non-UI functionality between components, it is suggested to extracting it into a separate JavaScript module. Later components import it and use that function, object, or a class, without extending it.
Yes, you can use web components in a react application. Even though many developers won't use this combination, it may require especially if you are using third-party UI components that are written using Web Components. For example, let us use Vaadin date picker web component as below,
The dynamic import() syntax is a ECMAScript proposal not currently part of the language standard. It is expected to be accepted in the near future. You can achieve code-splitting into your app using dynamic import(). Let's take an example of addition,
If you want to do code-splitting in a server rendered app, it is recommend to use Loadable Components because React.lazy and Suspense is not yet available for server-side rendering. Loadable lets you render a dynamic import as a regular component. Lets take an example,
If the module containing the dynamic import is not yet loaded by the time parent component renders, you must show some fallback content while you’re waiting for it to load using a loading indicator. This can be done using Suspense component. For example, the below code uses suspense component,
One of the best place to do code splitting is with routes. The entire page is going to re-render at once so users are unlikely to interact with other elements in the page at the same time. Due to this, the user experience won't be disturbed. Let us take an example of route based website using libraries like React Router with React.lazy,
Context is designed to share data that can be considered global for a tree of React components. For example, in the code below lets manually thread through a “theme” prop in order to style the Button component.
//Lets create a context with a default theme value "luna"
@@ -6604,7 +7852,10 @@
The defaultValue argument is only used when a component does not have a matching Provider above it in the tree. This can be helpful for testing components in isolation without wrapping them. Below code snippet provides default theme value as Luna.
A Consumer is a React component that subscribes to context changes. It requires a function as a child which receives current context value as argument and returns a react node. The value argument passed to the function will be equal to the value prop of the closest Provider for this context above in the tree. Lets take a simple example,
The context uses reference identity to determine when to re-render, there are some gotchas that could trigger unintentional renders in consumers when a provider’s parent re-renders. For example, the code below will re-render all consumers every time the Provider re-renders because a new object is always created for value.
Refs will not get passed through because ref is not a prop. It handled differently by React just like key. If you add a ref to a HOC, the ref will refer to the outermost container component, not the wrapped component. In this case, you can use Forward Ref API. For example, we can explicitly forward refs to the inner FancyButton component using the React.forwardRef API.
The below HOC logs all props,
Regular function or class components don’t receive the ref argument, and ref is not available in props either. The second ref argument only exists when you define a component with React.forwardRef call.
When you start using forwardRef in a component library, you should treat it as a breaking change and release a new major version of your library. This is because your library likely has a different behavior such as what refs get assigned to, and what types are exported. These changes can break apps and other libraries that depend on the old behavior.
If you don’t use ES6 then you may need to use the create-react-class module instead. For default props, you need to define getDefaultProps() as a function on the passed object. Whereas for initial state, you have to provide a separate getInitialState method that returns the initial state.
var Greeting =createReactClass({
@@ -6779,7 +8051,10 @@
Yes, JSX is not mandatory for using React. Actually it is convenient when you don’t want to set up compilation in your build environment. Each JSX element is just syntactic sugar for calling React.createElement(component, props, ...children). For example, let us take a greeting example with JSX,
React needs to use algorithms to find out how to efficiently update the UI to match the most recent tree. The diffing algorithms is generating the minimum number of operations to transform one tree into another. However, the algorithms have a complexity in the order of O(n3) where n is the number of elements in the tree.
In this case, for displaying 1000 elements would require in the order of one billion comparisons. This is far too expensive. Instead, React implements a heuristic O(n) algorithm based on two assumptions:
When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements. It covers the below rules during reconciliation algorithm,
Elements Of Different Types:
@@ -6865,7 +8146,10 @@
Even though the pattern named render props, you don’t have to use a prop named render to use this pattern. i.e, Any prop that is a function that a component uses to know what to render is technically a “render prop”. Lets take an example with the children prop for render props,
If you create a function inside a render method, it negates the purpose of pure component. Because the shallow prop comparison will always return false for new props, and each render in this case will generate a new value for the render prop. You can solve this issue by defining the render function as instance method.
You can implement most higher-order components (HOC) using a regular component with a render prop. For example, if you would prefer to have a withMouse HOC instead of a component, you could easily create one using a regular with a render prop.
Windowing is a technique that only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created. If your application renders long lists of data then this technique is recommended. Both react-window and react-virtualized are popular windowing libraries which provides several reusable components for displaying lists, grids, and tabular data.
The falsy values such as false, null, undefined, and true are valid children but they don't render anything. If you still want to display them then you need to convert it to string. Let's take an example on how to convert to a string,
<div>My JavaScript variable is {String(myVariable)}.</div>
@@ -6942,12 +8241,18 @@
React portals are very useful when a parent component has overflow: hidden or has properties that affect the stacking context(z-index,position,opacity etc styles) and you need to visually “break out” of its container. For example, dialogs, global message notifications, hovercards, and tooltips.
In React, the value attribute on form elements will override the value in the DOM. With an uncontrolled component, you might want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a defaultValue attribute instead of value.
Even though the tech stack varies from developer to developer, the most popular stack is used in react boilerplate project code. It mainly uses Redux and redux-saga for state management and asynchronous side-effects, react-router for routing purpose, styled-components for styling react components, axios for invoking REST api, and other supported stack such as webpack, reselect, ESNext, Babel.
You can clone the project https://github.com/react-boilerplate/react-boilerplate and start working on any new react project.
ریاکت هیچ ایدهای راجع به اینکه استایلها چطوری تعریف شدن نداره اما اگه تازه کار باشین میتونین از یه فایل جداگانه *.css که مث قبلا توی پروژههای ساده استفاده میشد کمک بگیرین و با استفاده از className از استایلها استفاده کنین. CSS In Js یه بخش از خود ریاکت نیست و توسط کتابخونههای third-party بهش اضافه شده اما اگه میخوایین. ازش(CSS-In-JS) استفاده کنین کتابخونه styled-components میتونه گزینه خوبی باشه.
نه. ولی میتونین از هوکها توی بعضی از کامپوننتهای قدیمی یا جدید استفاده کنین و سعی کنین باهاش راحت باشین البته برنامهای برای حذف classes از ریاکت هنوز وجود نداره.
هوک این افکت اسمش useEffect هستش و میشه خیلی ساده ازش برای فراخوانی API با استفاده از axios استفاده کرد. نتیجه درخواست رو هم خیلی ساده میشه ریخت تو یه state داخلی از component که وظیفه این ثبت شدن داده رو هم تابع setter از useState به عهده میگیره.
خب بزارین یه مثال بزنیم که لیست مقالات رو از یه API میگیره:
هوکها میشه گفت همه موارد کارکردی کلاسها رو پوشش نمیدن ولی با اضافه شدن هوکهای جدید برنامههای خوبی برای آینده هوکها پیشبینی میشه. در حال حاضر هیچ هوکی وجود نداره که کارکرد متدهای getSnapshotBeforeUpdate و componentDidCatch رو محقق کنه.
وقتی که با استفاده از هوک useState یه state رو معرفی میکنیم، یه آرایه دوتایی برمیگردونه که اندیس اولش متغیر مورد نظر برای دسترسی به state هست و اندیس درم متد setter یا تغییر دهنده اون state. یه روش اینه که با استفاده از اندیسهای آرایه و [0] و [1] بهشون دسترسی پیدا کنیم ولی یه کم ممکنه گیچ کننده باشه. ولی با استفاده از حالت destructuring خیلی سادهتر میشه این کار رو انجام داد.
برای مثال دسترسی به state با اندیسهای آرایه این شکلی میشد:
کامپوننتهای web اکثرا به عنوان APIهای imperative برای اجرای یه وظیفه خاص قلمداد میشن. برای استفاده ازشون باید با استفاده از ref که امکان کار با DOM را فراهم میکنه بیاییم یه کامپوننت که به شکل imperative کار میکنه ایجاد کنیم. ولی اگه از وب کامپوننتهای کاستوم یا همون third-party استفاده میکنیم، بهترین کار نوشتن یه کامپوننت wrapper برای استفاده از اون وب کامپوننت هست.
یه سری از میانافزارهای(middleware) معروف برای مدیریت فراخوانی actionهایی که به شکل asynchronous توی Redux فراخوانی میشن اینا هستن: Redux Thunk، Redux Promise و Redux Saga.
نه، مرورگرها نمیتونن کد JSX رو متوجه بشن. مجبوریم که از یه transpiler برای تبدیل کد JSX به کد جاواسکریپت عادی که مرورگرها متوجه میشن تبدیل کنیم. مشهورترین transpiler در حال حاضر Babel هست که برای اینکار استفاده میشه.
ریاکت از روش جربان داده یک طرفه استفاده میکنه. استفاده از prop باعث میشه از تکرار موارد بدیهی جلوگیری بشه و درک کردنش سادهتر از روش سنتی data-binding دو طرفه باشه.
پکیج react-scripts یه مجموعه از اسکریپتهاست که توی create-react-app برای ایجاد سریع و ساده پروژه ریاکتی ازشون استفاده میشه. دستور react-scripts start محیط توسعه کد رو ایجادمیکنه و یه سرور براتون استارت میکنه که از لود درلحظه و داغ ماژولها پشتیبانی میکنه.
متد ReactDOMServer#renderToNodeStream برای تولید HTML روی سرور و ارسال اون به درخواست initial کاربر استفاده میشه که باعث میشه صفحات سریعتر لود بشن. البته علاوه بر سرعت، به موتورهای جستجو این امکان رو میده که وبسایت شما رو به سادگی crawl کنن و SEO سایت بهتر بشه. Note: البته یادتون باشه که این متد توی مرورگر قابل اجرا نیست و فقط روی سرور کار میکنه.
MobX یه راهحل ساده، scalable برای مدیریت state هست که خیلی قوی تست شده. این روش برای برنامهنویسی تابعی کنشگرا(TFRP) استفاده میشه. برای برنامههای ریاکتی لازمه که پکیجهای زیر رو نصب کنین:
نه، اجبار برای یادگرفتن es2015/es6 برای کار با ریاکت وجود نداره. ولی توصیه شدیدی میشه که یاد بگیریدش چون منابع خیلی زیادی هستن که به شکل پیشفرض با es6 کار شدن. بزارین یه نگاه کلی به مواردی که الزاما با es6 کارشدن رو ذکر کنیم:
Destructuring: برای گرفتن مقادیر prop و استفاده از اونا توی کامپوننت
Concurrent rendering باعث میشه برنامه ریاکتی بتونه توی رندر کردن درخت کامپوننتها به شکل مسئولانهتری عمل کنه و انجام این رندر رو بدون بلاک کردن thread اصلی مرورگر انجام بده. این امر به ریاکت این اجازه رو میده که بتونه اجرا شدن یه رندر طولانی رو به بخشهای مرتب شده بر اساس اولویت تقسیم کنه و توی پیکهای مختلف رندر رو انجام بده. برای مثال وقتی حالت concurrent فعال باشه، ریاکت یه نیم نگاهی هم به بقیه تسکهایی که هنوز انجام نشدن داره و اگه تسک با اولویت دیگهای رو ببینه، حالت فعلی که داشت رندر میکرد رو متوقف میکنه و به انجام کار با اولویتتر میرسه. این حالت رو به دو روش میشه فعال کرد:
۱. برای یه بخش از برنامه با wrap کردن کامپوننت توی تگ concurrent :
هر دوتاشون به یه چیز اشاره میکنن. قبلا حالت concurrent با عنوان "Async Mode" توسط تیم ریاکت معرفی میشد. عنوان این قابلیت به این دلیل تغییر پیدا کرد که قابلیت ریاکت برای کار روی مرحلههای با اولویت متفاوت رو نشون بده. همین موضوع جلوی اشتباهات در مورد طرز تفکر راجع به رندر کردن async رو میگیره.
آره، میشه از javascript: استفاده کرد ولی یه warning توی کنسول برامون نشون داده میشه. چون آدرسهایی که با javascript: شروغ میشن خطرناکن و میتونن باعث ایجاد باگ امنیتی توی برنامه بشن.
پلاگین ESLint میاد یهسری قوانین برای درست نوشت هوکها رو توی برنامه الزامی میکنه. روش تشخیص دادن هوکها هم اینطوریه که میگه اگه اسم تابعی با ”use” شروع بشه و درست بعد اون یه حرف بزرگ بیاد پس اون تابع هوک هستش. این پلاگین در حالت پایه این دوتا شرط رو الزام میکنه:
فراخوانی هوکها یا باید داخل یه تابع که عنوانش PascalCase هست (منظور یه کامپوننته) یا یه تابع دیگه که مثلا useSomething هست (custom هوک) انجام بشه.
یه کامپوننت ساده UI رو تصور کنین، مثلا یه دکمه "لایک". وقتی که روش کلیک میکنین رنگ از خاکستری به آبی تغییر پیدا میکنه و اگه دوباره کلیک کنید باز خاکستری میشه.
رویش imperative برای انجام این کار اینطوریه:
