From 42c9a89d7fd24ed757e0ee1d4563cbecf8fd4b03 Mon Sep 17 00:00:00 2001
From: Shahab Hookها قابلیتی جدید در React 16.8 هستند. آنها امکان استفاده از state و دیگر قابلیتهای react را بدون نیاز به نوشتن کلاس به شما میدهند. تابع جدید شما میتوانید برای شروع یادگیری Hookها از صفحهی بعد شروع کنید.
+در این صفحه، ما به ذکر دلایلمان برای افزودن هوکها به react و اینکه آنها چگونه میتوانند به شما کمک کنند تا برنامههای خوبی بنویسید، میپردازیم. نکته ریاکت ۱۶.۸.۰ اولین نسخه منتشر شده است که از هوکها پشتیبانی میکند. هنگام ارتقاع، فراموش نکنید همهی پکیجها شامل React DOM را آپدیت نمایید. React Native در نسخهی بعدی پایدار از هوکها پشتیبانی خواهد کرد. در کنفرانس ۲۰۱۸ react، سوفیا آلپرت(Sophie Alpert) و دن آبرامف(Dan Abramov) هوکها را معرفی کردند. بعد از آن رایان فلورنس (Ryan Florence) نشان داد که چگونه میتوان به منظور استفاده از آنها[هوکها] یک اپلیکیشن را بازنویسی(refactor) کرد. ویدیوی زیر را ببینید: قبل از اینکه ادامه دهیم، توجه کنید که هوکها: هیچ برنامهای برای حذف کلاسها از ریاکت وجود ندارد. شما میتوانید برای مطالعهی بیشتر در رابطه با راهکارهای تطبیق تدریجی با هوکها از بخش پایین همین صفحه استفاده کنید. هوکها جایگزینی برای دانش و فهم شما از ریاکت نیستند. در عوض، هوکها یک رابط برنامهی کاربردی (API) صریحتر برای مفاهیم ریاکتی که از قبل میدانید فراهم میکنند: props ،state ،context ،ref و lifecycle. همانطور که بعدا نشان خواهیم داد، هوکها روشی جدید و قدرتمند برای تلفیق آنها ارایه میکنند. اگر هماکنون میخواهید یادگیری هوکها را شروع کنید، مستقیم به صفحهی بعد بروید! البته میتوانید مطالعهی این صفحه را ادامه دهید و با دلایلی که هوکها را به ریاکت اضافه کردیم و اینکه چگونه بدون بازنویسی اپلیکیشنهای قبلی از آنها استفاده خواهیم کرد، آشنا شوید. ریاکت راهی برای “چسباندن” یک رفتار قابل استفادهی مجدد یه یک کامپوننت را فراهم نمیکند (برای مثال اتصال به یک store). اگر شما مدتی با ریاکت کار کرده باشید، ممکن است با الگوهایی مانند render props و higher-order components آشنا باشید که سعی در حل این مسیله دارند. اما این الگوها شما را مجبور به تغییر ساختار مجدد کامپوننتتان هنگام استفاده از آنها میکنند، که این مسیله میتواند مایهی زحمت و سختتر شدن فهم کد باشد. اگر به یک اپلیکیشن ریاکت نوعی در React DevTools نگاه کنید، احتمالا با “wrapper hell”ای از کامپوننتها مواجه میشوید. کامپوننتهایی که با لایههایی از providerها، consumerها، HOCها، render props و دیگر کامپوننتهایی که به تجرید کمک میکنند، احاطه شدهاند. در حالی که ما میتوانیم آنها را در DevTools فیلتر کنیم، این [مشکل] به یک مسیلهی بنیادین اشاره دارد: ریاکت باید عناصری ابتدایی برای به اشتراک گذاری منطق دارای state فراهم کند. با استفاده از هوکها، شما میتوانید بخش منطق دارای state را از یک کامپوننت استخراج کنید، بطوری که بطور مستقل بتواند مورد آزمایش و استفادهی مجدد قرار گیرد. هوک ها به شما اجازه میدهند که بدون ایجاد تغییر در سلسله مراتب کامپوننتهایتان، از منطق دارای state مجددا استفاده نمایید. این کار باعث تسهیل در به اشتراکگذاری هوکها بین کامپوننتهای مختلف یا بین جامعه]ی ریاکت[ میشود. ما در این رابطه بیشتر در هوک مخصوص خود را بسازید بحث خواهیم کرد. ما معمولا مجبور به نگهداری از کامپوننتهایی بودیم که در بدو شروع ساده بودند اما تبدیل به یک وضع آشفتهی غیرقابل مهار از منطقهای دارای state و side effectها شدند. هر lifecycle متشکل از مخلوطی از منطقهای غیر مرتبط است. برای مثال، یک کامپوننت ممکن است در در بسیاری از موارد امکان این وجود ندارد که بتوانیم این کامپوننتها را به اجزای کوچکتر تقسیم کنیم، زیرا منطق دارای state در همه جا وجود دارد. همچنین تست کردن آنها دشوار است. این یکی از دلایلی است که بسیاری از افراد ترجیح میدهند تا ریاکت را با یک کتابخانهی مدیریت state دیگری ترکیب کنند. اگرچه، معمولا باعث اضافهشدن مقدار زیادی تجرید میشود و شما را مجبور میکند بین تعداد زیادی از فایلها جابهجا شوید که خود باعث مشکلتر شدن استفادهی مجدد از کامپوننتها میگردد. برای حل این مسیله، هوکها به شما اجازه میدهند یک کامپوننت را به توابع کوچکتری تقسیم کنید که مبنای آن ارتباط اجزایشان است (مثلا اضافه کردن یک اشتراک (subscription) یا دریافت داده)، نه تقسیم بر اساس متدهای lifecycle. همچنین میتوانید برای مدیریت state محلی از یک reducer کمک بگیرید تا بیشتر مطابق با پیشبینی شما باشد. در این باره در
+استفاده از Effect Hook بیشتر بحث خواهیم کرد. علاوه بر دشوار کردن قابلیت استفاده مجدد از کد و نظم آن، دریافتیم که کلاسها میتوانند مانع بزرگی در یادگیری ریاکت باشند. شما باید یادبگیرید که بعلاوه، ریاکت ۵ سال است که عرضه شده است، و ما میخواهیم در ۵ سال آینده مطرح باشد. همانطور که Svelte، Angular،Glimmerو دیگران نشان میدهند، کامپایل پیش از موعد کامپوننتها، پتانسیل قابلیتهای زیادی را دارد. بالاخص اگر به تمپلتها مححدود نباشد. ما اخیرا با
+component folding بوسیلهی Prepack آزمایشاتی را انجام دادیم که شاهد نتایج سریع و امیدوارکننده بودهایم. اگرچه دریافتیم که کامپوننتهای کلاسی میتوانند ناخواسته باعث افزایش الگوهایی میشوند که چنین بهینهسازیهایی را بدتر میکنند. کلاسها برای ابزارهای امروزی نیز مشکلاتی ایجاد میکنند. برای مثال، کلاسها به خوبی کمحجم(minify) نمیشوند، آنها با عث میشوند تا hot reloading شکننده و نامطمین شود. ما میخواهیم APIای را ارایه دهیم که به کد امکان بهینهسازی شدن بیشتری بدهد. برای حل این مشکلات، هوکها به شما اجازه میدهند تا از بیشتر قابلیتهای ریاکت بدون کلاسها بهره ببرید. مفهوما، همیشه کامپوننتهای ریاکت بیشتر به توابع نزدیکتر بودهاند. هوکها بدون آنکه روح کاربردی ریاکت را فداکند، توابع را شامل میشوند. هوکها امکان دسترسی به راههای فرار دستوری میدهند و شما را مجبور به یادگیری تکنیکهای پیچیدهی توابع یا برنامهنویسی ریاکتیو نمیکند. مثالها نگاه اجمالی به هوک نقطهی شروع مناسبی برای یادگیری Hookهاست. خلاصه: هیچ برنامهای برای حذف کلاس ها از ریاکت وجود ندارد.. ما میدانیم که دولوپرهای ریاکت بر روی عرضهی محصولات تمرکز دارند و وقتی برای نگاه کردن و مطالعهی هر API جدیدی را که منتشر میشود، ندارند. هوکها بسیار جدید هستند، و شاید برای یادگیری و بهرهگیری از آنها بهتر باشد تا برای مثالها و آموزشهای بیشتر صبر کنید. همچنین اطلاع داریم که انتظارات برای اضافه کردن دستورات پایهی جدید به ریاکت بسیار بالاست. ما برای خوانندههای کنجکاو یک RFC با جزییات آماده کردهایم که با عمق بیشتری به انگیزهها میپردازد، و دید بیشتری بر تصصمیمات جزیی تصمیمگیریها و تصمیمات مرتبط قبلی فراهم میکند. اساسا، هوک ها در کنار کدهای نوشتهشده از قبل کار خواهند کرد، پس شما میتوانید بصورت تدریجی از آنها بهره گیرید ما این API آزمایشی را برای این به اشتراک میگذاریم تا بتوانیم از بازخوردهای افراد در جامعه که برای شکل دادن به آیندهی ریاکت مشتاق هستند بهره گیریم. — and we will iterate on Hooks in the open. در انتها، هیچ عجلهای برای مهاجرت به هوکها وجود ندارد. ما پیشنهاد میکنیم از هرگونه “بازنویسی بزرگ” بپرهیزید، مخصوصا برای کامپوننتهای کلاسی موجود و پیچیده. برای “تفکر مبتنی بر هوکها” مقداری تامل نیاز است. تجربهی ما این است که ابتدا بهترین کار تمرین و کار با هوکها در کامپوننتهای جدید و غیرحیاتی است، و اطمینان بخشیدن از اینکه همهی افراد تیم شما با آنها ارتباط برقرار کردهاند. بعد از اینکه هوکها را امتحان کردید، لطفابازخوردهای خود را برای ما بفرستید ، چه مثبت و چه منفی. ما یک صفحه پرسش و پاسخ متداول از hookها فراهم کرده ایم که اکثر سوالات رایج در مورد هوکها را پاسخ میدهد. Hookها قابلیتی جدید در React 16.8 هستند. آنها امکان استفاده از state و دیگر قابلیتهای react را بدون نیاز به نوشتن کلاس به شما میدهند. Hookها قابلیتی جدید در React 16.8 هستند. آنها امکان استفاده از state و دیگر قابلیتهای react را بدون نیاز به نوشتن کلاس به شما میدهند. تابع جدید تابع جدید شما میتوانید برای شروع یادگیری Hookها از صفحهی بعد شروع کنید.
-در این صفحه، ما به ذکر دلایلمان برای افزودن هوکها به react و اینکه آنها چگونه میتوانند به شما کمک کنند تا برنامههای خوبی بنویسید، میپردازیم. شما میتوانید برای شروع یادگیری Hookها از صفحهی بعد شروع کنید.
+در این صفحه، ما به ذکر دلایلمان برای افزودن هوکها به react و اینکه آنها چگونه میتوانند به شما کمک کنند تا برنامههای خوبی بنویسید، میپردازیم. نکته ریاکت ۱۶.۸.۰ اولین نسخه منتشر شده است که از هوکها پشتیبانی میکند. هنگام ارتقاع، فراموش نکنید همهی پکیجها شامل React DOM را آپدیت نمایید. React Native در نسخهی بعدی پایدار از هوکها پشتیبانی خواهد کرد. ریاکت ۱۶.۸.۰ اولین نسخه منتشر شده است که از هوکها پشتیبانی میکند. هنگام ارتقاع، فراموش نکنید همهی پکیجها شامل React DOM را آپدیت نمایید. React Native در نسخهی بعدی پایدار از هوکها پشتیبانی خواهد کرد. در کنفرانس ۲۰۱۸ react، سوفیا آلپرت(Sophie Alpert) و دن آبرامف(Dan Abramov) هوکها را معرفی کردند. بعد از آن رایان فلورنس (Ryan Florence) نشان داد که چگونه میتوان به منظور استفاده از آنها[هوکها] یک اپلیکیشن را بازنویسی(refactor) کرد. ویدیوی زیر را ببینید: در کنفرانس ۲۰۱۸ react، سوفیا آلپرت(Sophie Alpert) و دن آبرامف(Dan Abramov) هوکها را معرفی کردند. بعد از آن رایان فلورنس (Ryan Florence) نشان داد که چگونه میتوان به منظور استفاده از آنها[هوکها] یک اپلیکیشن را بازنویسی(refactor) کرد. ویدیوی زیر را ببینید: قبل از اینکه ادامه دهیم، توجه کنید که هوکها: قبل از اینکه ادامه دهیم، توجه کنید که هوکها: هیچ برنامهای برای حذف کلاسها از ریاکت وجود ندارد. شما میتوانید برای مطالعهی بیشتر در رابطه با راهکارهای تطبیق تدریجی با هوکها از بخش پایین همین صفحه استفاده کنید. هیچ برنامهای برای حذف کلاسها از ریاکت وجود ندارد. شما میتوانید برای مطالعهی بیشتر در رابطه با راهکارهای تطبیق تدریجی با هوکها از بخش پایین همین صفحه استفاده کنید. هوکها جایگزینی برای دانش و فهم شما از ریاکت نیستند. در عوض، هوکها یک رابط برنامهی کاربردی (API) صریحتر برای مفاهیم ریاکتی که از قبل میدانید فراهم میکنند: props ،state ،context ،ref و lifecycle. همانطور که بعدا نشان خواهیم داد، هوکها روشی جدید و قدرتمند برای تلفیق آنها ارایه میکنند. هوکها جایگزینی برای دانش و فهم شما از ریاکت نیستند. در عوض، هوکها یک رابط برنامهی کاربردی (API) صریحتر برای مفاهیم ریاکتی که از قبل میدانید فراهم میکنند: props ،state ،context ،ref و lifecycle. همانطور که بعدا نشان خواهیم داد، هوکها روشی جدید و قدرتمند برای تلفیق آنها ارائه میکنند. اگر هماکنون میخواهید یادگیری هوکها را شروع کنید، مستقیم به صفحهی بعد بروید! البته میتوانید مطالعهی این صفحه را ادامه دهید و با دلایلی که هوکها را به ریاکت اضافه کردیم و اینکه چگونه بدون بازنویسی اپلیکیشنهای قبلی از آنها استفاده خواهیم کرد، آشنا شوید. اگر هماکنون میخواهید یادگیری هوکها را شروع کنید، مستقیم به صفحهی بعد بروید! البته میتوانید مطالعهی این صفحه را ادامه دهید و با دلایلی که هوکها را به ریاکت اضافه کردیم و اینکه چگونه بدون بازنویسی اپلیکیشنهای قبلی از آنها استفاده خواهیم کرد، آشنا شوید. ریاکت راهی برای “چسباندن” یک رفتار قابل استفادهی مجدد یه یک کامپوننت را فراهم نمیکند (برای مثال اتصال به یک store). اگر شما مدتی با ریاکت کار کرده باشید، ممکن است با الگوهایی مانند render props و higher-order components آشنا باشید که سعی در حل این مسیله دارند. اما این الگوها شما را مجبور به تغییر ساختار مجدد کامپوننتتان هنگام استفاده از آنها میکنند، که این مسیله میتواند مایهی زحمت و سختتر شدن فهم کد باشد. اگر به یک اپلیکیشن ریاکت نوعی در React DevTools نگاه کنید، احتمالا با “wrapper hell”ای از کامپوننتها مواجه میشوید. کامپوننتهایی که با لایههایی از providerها، consumerها، HOCها، render props و دیگر کامپوننتهایی که به تجرید کمک میکنند، احاطه شدهاند. در حالی که ما میتوانیم آنها را در DevTools فیلتر کنیم، این [مشکل] به یک مسیلهی بنیادین اشاره دارد: ریاکت باید عناصری ابتدایی برای به اشتراک گذاری منطق دارای state فراهم کند. ریاکت راهی برای «اضافهکردن» یک رفتار قابل استفادهی مجدد یه یک کامپوننت را فراهم نمیکند (برای مثال اتصال به یک store). اگر شما مدتی با ریاکت کار کرده باشید، ممکن است با الگوهایی مانند render props و higher-order components آشنا باشید که سعی در حل این مسیله دارند. اما این الگوها شما را مجبور به تغییر ساختار مجدد کامپوننتتان هنگام استفاده از آنها میکنند، که این مسیله میتواند مایهی زحمت و سختتر شدن فهم کد باشد. اگر به یک اپلیکیشن ریاکت نوعی در React DevTools نگاه کنید، احتمالا با «wrapper hell»ای از کامپوننتها مواجه میشوید. کامپوننتهایی که با لایههایی از providerها، consumerها، HOCها، render props و دیگر کامپوننتهایی که به تجرید کمک میکنند، احاطه شدهاند. در حالی که ما میتوانیم آنها را در DevTools فیلتر کنیم، این [مشکل] به یک مسیلهی بنیادین اشاره دارد: ریاکت باید عناصری ابتدایی برای به اشتراک گذاری منطق دارای state فراهم کند. با استفاده از هوکها، شما میتوانید بخش منطق دارای state را از یک کامپوننت استخراج کنید، بطوری که بطور مستقل بتواند مورد آزمایش و استفادهی مجدد قرار گیرد. هوک ها به شما اجازه میدهند که بدون ایجاد تغییر در سلسله مراتب کامپوننتهایتان، از منطق دارای state مجددا استفاده نمایید. این کار باعث تسهیل در به اشتراکگذاری هوکها بین کامپوننتهای مختلف یا بین جامعه]ی ریاکت[ میشود. با استفاده از هوکها، شما میتوانید بخش منطق دارای state را از یک کامپوننت استخراج کنید، بطوری که بطور مستقل بتواند مورد آزمایش و استفادهی مجدد قرار گیرد. هوک ها به شما اجازه میدهند که بدون ایجاد تغییر در سلسله مراتب کامپوننتهایتان، از منطق دارای state مجددا استفاده نمایید. این کار باعث تسهیل در به اشتراکگذاری هوکها بین کامپوننتهای مختلف یا بین جامعه[ی ریاکت] میشود. ما در این رابطه بیشتر در هوک مخصوص خود را بسازید بحث خواهیم کرد. ما معمولا مجبور به نگهداری از کامپوننتهایی بودیم که در بدو شروع ساده بودند اما تبدیل به یک وضع آشفتهی غیرقابل مهار از منطقهای دارای state و side effectها شدند. هر lifecycle متشکل از مخلوطی از منطقهای غیر مرتبط است. برای مثال، یک کامپوننت ممکن است در ما معمولا مجبور به نگهداری از کامپوننتهایی بودیم که در بدو شروع ساده بودند اما تبدیل به یک وضع آشفتهی غیرقابل مهار از منطقهای دارای state و side effectها شدند. هر lifecycle متشکل از مخلوطی از منطقهای غیر مرتبط است. برای مثال، یک کامپوننت ممکن است در در بسیاری از موارد امکان این وجود ندارد که بتوانیم این کامپوننتها را به اجزای کوچکتر تقسیم کنیم، زیرا منطق دارای state در همه جا وجود دارد. همچنین تست کردن آنها دشوار است. این یکی از دلایلی است که بسیاری از افراد ترجیح میدهند تا ریاکت را با یک کتابخانهی مدیریت state دیگری ترکیب کنند. اگرچه، معمولا باعث اضافهشدن مقدار زیادی تجرید میشود و شما را مجبور میکند بین تعداد زیادی از فایلها جابهجا شوید که خود باعث مشکلتر شدن استفادهی مجدد از کامپوننتها میگردد. در بسیاری از موارد امکان این وجود ندارد که بتوانیم این کامپوننتها را به اجزای کوچکتر تقسیم کنیم، زیرا منطق دارای state در همه جا وجود دارد. همچنین تست کردن آنها دشوار است. این یکی از دلایلی است که بسیاری از افراد ترجیح میدهند تا ریاکت را با یک کتابخانهی مدیریت state دیگری ترکیب کنند. اگرچه، معمولا باعث اضافهشدن مقدار زیادی تجرید میشود و شما را مجبور میکند بین تعداد زیادی از فایلها جابهجا شوید که خود باعث مشکلتر شدن استفادهی مجدد از کامپوننتها میگردد. برای حل این مسیله، هوکها به شما اجازه میدهند یک کامپوننت را به توابع کوچکتری تقسیم کنید که مبنای آن ارتباط اجزایشان است (مثلا اضافه کردن یک اشتراک (subscription) یا دریافت داده)، نه تقسیم بر اساس متدهای lifecycle. همچنین میتوانید برای مدیریت state محلی از یک reducer کمک بگیرید تا بیشتر مطابق با پیشبینی شما باشد. برای حل این مسیله، هوکها به شما اجازه میدهند یک کامپوننت را به توابع کوچکتری تقسیم کنید که مبنای آن ارتباط اجزایشان است (مثلا اضافه کردن یک اشتراک (subscription) یا دریافت داده)، نه تقسیم بر اساس متدهای lifecycle. همچنین میتوانید برای مدیریت state محلی از یک reducer کمک بگیرید تا بیشتر مطابق با پیشبینی شما باشد. در این باره در
-استفاده از Effect Hook بیشتر بحث خواهیم کرد.useState اولین “Hook“ای است که یاد میگیریم، البته این مثال تنها یک نمایش اجمالی است. در صورتی که آن را در نیافتید نگران نباشید!
+
-
-
-
+معرفی ویدیویی
-## No Breaking Changes {#no-breaking-changes}
+
-**There are no plans to remove classes from React.** You can read more about the gradual adoption strategy for Hooks in the [bottom section](#gradual-adoption-strategy) of this page.
+بدون ایجاد خلل در دیگر قسمتها
-**If you just want to start learning Hooks, feel free to [jump directly to the next page!](/docs/hooks-overview.html)** You can also keep reading this page to learn more about why we're adding Hooks, and how we're going to start using them without rewriting our applications.
+
+
-Hooks solve a wide variety of seemingly unconnected problems in React that we've encountered over five years of writing and maintaining tens of thousands of components. Whether you're learning React, use it daily, or even prefer a different library with a similar component model, you might recognize some of these problems.
+انگیزه
-We'll discuss this more in [Building Your Own Hooks](/docs/hooks-custom.html).
+استفادهی مجدد از منطق دارای state در بین کامپوننتها دشوار است
-### Complex components become hard to understand {#complex-components-become-hard-to-understand}
+فهم کامپوننتهای پیچیده دشوارتر میشود
-We'll discuss this more in [Using the Effect Hook](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns).
+componentDidMount و componentDidUpdate به دریافت داده بپردازد. درحالیکه همان تابع میتواند دارای منطقی غیر مرتبط باشد که به اضافه کردن event listenerها میپردازد، و در متد componentWillUnmount آنها [event listenerها] را پاکسازی (cleanup) میکند. کدهایی که متقابلا به هم مرتبط هستند [مثل اضافه و پاکسازی event listener] از یکدیگر جدا هستند، ولی کدهایی که کاملا غیر مرتبطاند [اضافه کردنevent listener و دریافت داده] در یک متد نوشته میشوند. که این احتمال خطا و باگ و ناسازگاری را بیشتر میکند. کلاسها هم انسان و هم کامپیوتر را گیج میکنند
->Examples
->
->[Hooks at a Glance](/docs/hooks-overview.html) is a good place to start learning Hooks.
+this چگونه در جاوااسکریپت کار میکند، که با نحوهی کار کردش در اکثر زبانها بسیار متفاوت است. شما باید به یاد داشته باشید تا event handlerها را bind کنید. بدون syntax proposals، کد بسیار طولانی خواهد بود. آدمها میتوانند props، state، و جریان بالا به پایین داده را کاملا دریابند ولی هنوز با کلاسها کلنجار بروند. برتری کامپوننت از جنس تابع یا کلاس در ریاکت و موارد استفاده از آنها باعث اختلاف نظر است، حتی در میان دولوپرهای با تجربهی ریاکت.
+
-We also understand that the bar for adding a new primitive to React is extremely high. For curious readers, we have prepared a [detailed RFC](https://github.com/reactjs/rfcs/pull/68) that dives into motivation with more details, and provides extra perspective on the specific design decisions and related prior art.
+استراتژی تطبیق تدریجی
-**Crucially, Hooks work side-by-side with existing code so you can adopt them gradually.** We are sharing this experimental API to get early feedback from those in the community who are interested in shaping the future of React — and we will iterate on Hooks in the open.
+
+
-Finally, there is no rush to migrate to Hooks. We recommend avoiding any "big rewrites", especially for existing, complex class components. It takes a bit of a mindshift to start "thinking in Hooks". In our experience, it's best to practice using Hooks in new and non-critical components first, and ensure that everybody on your team feels comfortable with them. After you give Hooks a try, please feel free to [send us feedback](https://github.com/facebook/react/issues/new), positive or negative.
+سوالات متداول
-By the end of this page, you should have a rough idea of what problems Hooks are solving, but many details are probably unclear. Don't worry! **Let's now go to [the next page](/docs/hooks-overview.html) where we start learning about Hooks by example.**
+useState اولین “Hook“ای است که یاد میگیریم، البته این مثال تنها یک نمایش اجمالی است. در صورتی که آن را در نیافتید نگران نباشید!useState اولین «Hook»ای است که یاد میگیریم، البته این مثال تنها یک نمایش اجمالی است. در صورتی که آن را در نیافتید نگران نباشید!
معرفی ویدیویی
-
@@ -56,71 +56,71 @@ function Example() {
-بدون ایجاد خلل در دیگر قسمتها
+بدون ایجاد خلل در دیگر قسمتها
-
-
-انگیزه
+انگیزه
-استفادهی مجدد از منطق دارای state در بین کامپوننتها دشوار است
+استفادهی مجدد از منطق دارای state در بین کامپوننتها دشوار است
-فهم کامپوننتهای پیچیده دشوارتر میشود
+فهم کامپوننتهای پیچیده دشوارتر میشود
-componentDidMount و componentDidUpdate به دریافت داده بپردازد. درحالیکه همان تابع میتواند دارای منطقی غیر مرتبط باشد که به اضافه کردن event listenerها میپردازد، و در متد componentWillUnmount آنها [event listenerها] را پاکسازی (cleanup) میکند. کدهایی که متقابلا به هم مرتبط هستند [مثل اضافه و پاکسازی event listener] از یکدیگر جدا هستند، ولی کدهایی که کاملا غیر مرتبطاند [اضافه کردنevent listener و دریافت داده] در یک متد نوشته میشوند. که این احتمال خطا و باگ و ناسازگاری را بیشتر میکند. componentDidMount و componentDidUpdate به دریافت داده بپردازد. درحالیکه همان تابع میتواند دارای منطقی غیر مرتبط باشد که به اضافه کردن event listenerها میپردازد، و در متد componentWillUnmount آنها [event listenerها] را پاکسازی (cleanup) میکند. کدهایی که متقابلا به هم مرتبط هستند [مثل اضافه و پاکسازی event listener] از یکدیگر جدا هستند، ولی کدهایی که کاملا غیر مرتبطاند [اضافه کردنevent listener و دریافت داده] در یک متد نوشته میشوند. که این احتمال خطا و باگ و ناسازگاری را بیشتر میکند.
علاوه بر دشوار کردن قابلیت استفاده مجدد از کد و نظم آن، دریافتیم که کلاسها میتوانند مانع بزرگی در یادگیری ریاکت باشند. شما باید یادبگیرید که this چگونه در جاوااسکریپت کار میکند، که با نحوهی کار کردش در اکثر زبانها بسیار متفاوت است. شما باید به یاد داشته باشید تا event handlerها را bind کنید. بدون syntax proposals، کد بسیار طولانی خواهد بود. آدمها میتوانند props، state، و جریان بالا به پایین داده را کاملا دریابند ولی هنوز با کلاسها کلنجار بروند. برتری کامپوننت از جنس تابع یا کلاس در ریاکت و موارد استفاده از آنها باعث اختلاف نظر است، حتی در میان دولوپرهای با تجربهی ریاکت.
علاوه بر دشوار کردن قابلیت استفاده مجدد از کد و نظم آن، دریافتیم که کلاسها میتوانند مانع بزرگی در یادگیری ریاکت باشند. شما باید یادبگیرید که this چگونه در جاوااسکریپت کار میکند، که با نحوهی کار کردش در اکثر زبانها بسیار متفاوت است. شما باید به یاد داشته باشید تا event handlerها را bind کنید. بدون syntax proposals، کد بسیار طولانی خواهد بود. آدمها میتوانند props، state، و جریان بالا به پایین داده را کاملا دریابند ولی هنوز با کلاسها کلنجار بروند. برتری کامپوننت از جنس تابع یا کلاس در ریاکت و موارد استفاده از آنها باعث اختلاف نظر است، حتی در میان دولوپرهای با تجربهی ریاکت.
بعلاوه، ریاکت ۵ سال است که عرضه شده است، و ما میخواهیم در ۵ سال آینده مطرح باشد. همانطور که Svelte، Angular،Glimmerو دیگران نشان میدهند، کامپایل پیش از موعد کامپوننتها، پتانسیل قابلیتهای زیادی را دارد. بالاخص اگر به تمپلتها مححدود نباشد. ما اخیرا با -component folding بوسیلهی Prepack آزمایشاتی را انجام دادیم که شاهد نتایج سریع و امیدوارکننده بودهایم. اگرچه دریافتیم که کامپوننتهای کلاسی میتوانند ناخواسته باعث افزایش الگوهایی میشوند که چنین بهینهسازیهایی را بدتر میکنند. کلاسها برای ابزارهای امروزی نیز مشکلاتی ایجاد میکنند. برای مثال، کلاسها به خوبی کمحجم(minify) نمیشوند، آنها با عث میشوند تا hot reloading شکننده و نامطمین شود. ما میخواهیم APIای را ارایه دهیم که به کد امکان بهینهسازی شدن بیشتری بدهد.
+بعلاوه، ریاکت ۵ سال است که عرضه شده است، و ما میخواهیم در ۵ سال آینده مطرح باشد. همانطور که Svelte، Angular،Glimmerو دیگران نشان میدهند، کامپایل پیش از موعد کامپوننتها، پتانسیل قابلیتهای زیادی را دارد. بالاخص اگر به تمپلتها مححدود نباشد. ما اخیرا با +component folding بوسیلهی Prepack آزمایشاتی را انجام دادیم که شاهد نتایج سریع و امیدوارکننده بودهایم. اگرچه دریافتیم که کامپوننتهای کلاسی میتوانند ناخواسته باعث افزایش الگوهایی شوند که چنین بهینهسازیهایی را بدتر میکنند. کلاسها برای ابزارهای امروزی نیز مشکلاتی ایجاد میکنند. برای مثال، کلاسها به خوبی کمحجم(minify) نمیشوند، آنها باعث میشوند تا hot reloading شکننده و نامطمئن شود. ما میخواهیم APIای را ارائه دهیم که به کد امکان بهینهسازی بیشتری بدهد.
-برای حل این مشکلات، هوکها به شما اجازه میدهند تا از بیشتر قابلیتهای ریاکت بدون کلاسها بهره ببرید. مفهوما، همیشه کامپوننتهای ریاکت بیشتر به توابع نزدیکتر بودهاند. هوکها بدون آنکه روح کاربردی ریاکت را فداکند، توابع را شامل میشوند. هوکها امکان دسترسی به راههای فرار دستوری میدهند و شما را مجبور به یادگیری تکنیکهای پیچیدهی توابع یا برنامهنویسی ریاکتیو نمیکند.
+برای حل این مشکلات، هوکها به شما اجازه میدهند تا از بیشتر قابلیتهای ریاکت بدون کلاسها بهره ببرید. مفهوما، همیشه کامپوننتهای ریاکت بیشتر به توابع نزدیکتر بودهاند. هوکها بدون آنکه روح کاربردی ریاکت را فداکند، توابع را شامل میشوند. هوکها امکان دسترسی به راههای فرار دستوری میدهند و شما را مجبور به یادگیری تکنیکهای پیچیدهی توابع یا برنامهنویسی ریاکتیو نمیکند.
-مثالها
-نگاه اجمالی به هوک نقطهی شروع مناسبی برای یادگیری Hookهاست.
+مثالها
+نگاه اجمالی به هوک نقطهی شروع مناسبی برای یادگیری Hookهاست.
--خلاصه: هیچ برنامهای برای حذف کلاس ها از ریاکت وجود ندارد..
+خلاصه: هیچ برنامهای برای حذف کلاس ها از ریاکت وجود ندارد.
ما میدانیم که دولوپرهای ریاکت بر روی عرضهی محصولات تمرکز دارند و وقتی برای نگاه کردن و مطالعهی هر API جدیدی را که منتشر میشود، ندارند. هوکها بسیار جدید هستند، و شاید برای یادگیری و بهرهگیری از آنها بهتر باشد تا برای مثالها و آموزشهای بیشتر صبر کنید.
+ما میدانیم که دولوپرهای ریاکت بر روی عرضهی محصولات تمرکز دارند و وقتی برای نگاه کردن و مطالعهی هر API جدیدی را که منتشر میشود، ندارند. هوکها بسیار جدید هستند، و شاید برای یادگیری و بهرهگیری از آنها بهتر باشد تا برای مثالها و آموزشهای بیشتر صبر کنید.
-همچنین اطلاع داریم که انتظارات برای اضافه کردن دستورات پایهی جدید به ریاکت بسیار بالاست. ما برای خوانندههای کنجکاو یک RFC با جزییات آماده کردهایم که با عمق بیشتری به انگیزهها میپردازد، و دید بیشتری بر تصصمیمات جزیی تصمیمگیریها و تصمیمات مرتبط قبلی فراهم میکند.
+همچنین اطلاع داریم که انتظارات برای اضافه کردن دستورات پایهی جدید به ریاکت بسیار بالاست. ما برای خوانندههای کنجکاو یک RFC با جزییات آماده کردهایم که با عمق بیشتری به انگیزهها میپردازد، و دید بیشتری بر تصصمیمات جزیی تصمیمگیریها و تصمیمات مرتبط قبلی فراهم میکند.
-اساسا، هوک ها در کنار کدهای نوشتهشده از قبل کار خواهند کرد، پس شما میتوانید بصورت تدریجی از آنها بهره گیرید ما این API آزمایشی را برای این به اشتراک میگذاریم تا بتوانیم از بازخوردهای افراد در جامعه که برای شکل دادن به آیندهی ریاکت مشتاق هستند بهره گیریم. — and we will iterate on Hooks in the open.
+اساسا، هوک ها در کنار کدهای نوشتهشده از قبل کار خواهند کرد، پس شما میتوانید بصورت تدریجی از آنها بهره گیرید. ما این API آزمایشی را برای این به اشتراک میگذاریم تا بتوانیم از بازخوردهای سریع افراد در جامعه که برای شکل دادن به آیندهی ریاکت مشتاق هستند بهره گیریم. — and we will iterate on Hooks in the open.
-در انتها، هیچ عجلهای برای مهاجرت به هوکها وجود ندارد. ما پیشنهاد میکنیم از هرگونه “بازنویسی بزرگ” بپرهیزید، مخصوصا برای کامپوننتهای کلاسی موجود و پیچیده. برای “تفکر مبتنی بر هوکها” مقداری تامل نیاز است. تجربهی ما این است که ابتدا بهترین کار تمرین و کار با هوکها در کامپوننتهای جدید و غیرحیاتی است، و اطمینان بخشیدن از اینکه همهی افراد تیم شما با آنها ارتباط برقرار کردهاند. بعد از اینکه هوکها را امتحان کردید، لطفابازخوردهای خود را برای ما بفرستید ، چه مثبت و چه منفی.
+در انتها، هیچ عجلهای برای مهاجرت به هوکها وجود ندارد. ما پیشنهاد میکنیم از هرگونه «بازنویسی بزرگ» بپرهیزید، مخصوصا برای کامپوننتهای کلاسی موجود و پیچیده. برای «تفکر مبتنی بر هوکها» مقداری نیازمند تامل است. تجربهی ما این است که بهترین کار برای شروع، تمرین و کار با هوکها در کامپوننتهای جدید و غیرحیاتی است، و حصول اطمینان از اینکه همهی افراد تیم شما با آنها ارتباط برقرار کردهاند. بعد از اینکه هوکها را امتحان کردید، لطفا بازخوردهای خود را برای ما بفرستید ، چه مثبت و چه منفی.
ما یک صفحه پرسش و پاسخ متداول از hookها فراهم کرده ایم که اکثر سوالات رایج در مورد هوکها را پاسخ میدهد.
\ No newline at end of file +ما یک صفحه پرسش و پاسخ متداول از hookها فراهم کرده ایم که اکثر سوالات رایج در مورد هوکها را پاسخ میدهد.
\ No newline at end of file