From f8ff204e7f6eb371a3e095c997bafe5eb33abd21 Mon Sep 17 00:00:00 2001 From: sayjeyhi Date: Sun, 27 Jun 2021 13:18:54 +0430 Subject: [PATCH] edited till question 260 --- book.md | 467 ++++++++++++++++++++++++++++---------------------------- 1 file changed, 237 insertions(+), 230 deletions(-) diff --git a/book.md b/book.md index 018a91d4..d365efd0 100644 --- a/book.md +++ b/book.md @@ -217,7 +217,7 @@ puppeteer: | 176 | [مدل ذهنی redux-saga چطوریه؟](#مدل-ذهنی-redux-saga-چطوریه) | | 177 | [تفاوت افکت‌های call و put توی redux-saga چی هست؟](#تفاوت-افکتهای-call-و-put-توی-redux-saga-چی-هست) | | 178 | [Redux Thunk چیه؟](#Redux-Thunk-چیه) | -| 179 | [تفاوت‌های redux-saga و redux-thunk جیا هستن؟](#تفاوتهای-redux-saga-و-redux-thunk-جیا-هستن) | +| 179 | [تفاوت‌های redux-saga و redux-thunk چیا هستن؟](#تفاوتهای-redux-saga-و-redux-thunk-چیا-هستن) | | 180 | [Redux DevTools چیه؟](#Redux-DevTools-چیه) | | 181 | [ویژگی‌های Redux DevTools کدوما هستن؟](#ویژگیهای-Redux-DevTools-چیا-هستن) | | 182 | [سلکتورهای ریداکس چی هستن و چرا باید ازشون استفاده کنیم؟](#سلکتورهای-ریداکس-چی-هستن-و-چرا-باید-ازشون-استفاده-کنیم) | @@ -289,7 +289,7 @@ puppeteer: | 245 | [کدوم متدها و به چه ترتیبی در طول ری‌رندر فراخوانی میشن؟](#کدوم-متدها-و-به-چه-ترتیبی-در-طول-ریرندر-فراخوانی-میشن) | | 246 | [کدوم متد‌ها موقع error handling فراخوانی میشن؟](#کدوم-متدها-موقع-error-handling-فراخوانی-میشن) | | 247 | [کارکرد ویژگی displayName چیه؟](#کارکرد-ویژگی-displayName-چیه) | -| 248 | [ساپورت مرورگرها برای برنامه ری‌اکتی چطوریه؟](#ساپورت-مرورگرها-برای-برنامه-ریاکتی-چطوریه) | +| 248 | [پشتیبانی مرورگرها برای برنامه ری‌اکتی چطوریه؟](#پشتیبانی-مرورگرها-برای-برنامه-ریاکتی-چطوریه) | | 249 | [هدف از متد unmountComponentAtNode چیه؟](#هدف-از-متد-unmountComponentAtNode-چیه) | | 250 | [code-splitting چیه؟](#code-splitting-چیه) | | 251 | [مزایای حالت strict چیه؟](#مزایای-حالت-strict-چیه) | @@ -299,7 +299,7 @@ puppeteer: | 255 | [چطوری میشه forwardRefs رو توی DevTools دیباگ کرد؟](#چطوری-میشه-forwardRefs-رو-توی-DevTools-دیباگ-کرد) | | 256 | [مقدار یه props کامپوننت کی true میشه؟](#مقدار-یه-props-کامپوننت-کی-true-میشه) | | 257 | [NextJS چیه و ویژگی‌های اصلیش کدوما هستن؟](#NextJS-چیه-و-ویژگیهای-اصلیش-چیا-هستن) | -| 258 | [چط،وی کی‌تونیم یه تابع event handler رو به یه کامپوننت پاس بدیم؟](#چط،وی-کیتونیم-یه-تابع-event-handler-رو-به-یه-کامپوننت-پاس-بدیم) | +| 258 | [چطوری می‌تونیم یه تابع event handler رو به یه کامپوننت پاس بدیم؟](#چطوری-میتونیم-یه-تابع-event-handler-رو-به-یه-کامپوننت-پاس-بدیم) | | 259 | [استفاده از توابع arrow برای متدهای render خوبه؟](#استفاده-از-توابع-arrow-برای-متدهای-render-خوبه) | | 260 | [چطوری از اجرای چندباره یه تابع جلوگیری کنیم؟](#چطوری-از-اجرای-چندباره-یه-تابع-جلوگیری-کنیم) | | 261 | [JSX چطوری از حمله‌های Injection جلوگیری می‌کنه؟](#JSX-چطوری-از-حملههای-Injection-جلوگیری-میکنه) | @@ -4135,7 +4135,7 @@ puppeteer: 144. ### چطوری میشه locale فعلی رو توی React Intl بدست آورد؟ - می‌تونیم با استفاده از `injectIntl` locale فعلی رو بگیریم: + می‌تونیم با استفاده از `injectIntl` به locale فعلی رو دسترسی داشته باشیم: @@ -4159,7 +4159,7 @@ puppeteer: 145. ### چطوری با استفاده از React Intl یه تاریخ رو فرمت‌بندی کنیم؟ - با استفاده از HOC `injectIntl` می‌تونیم به متد `formatDate` توی کامپوننت خودمون دسترسی داشته باشیم. این متد به صورت داخلی توسط `FormattedDate` استفاده میشه و مقدار string تاریخ فرمت بندی شده رو برمی‌گردونه. + می‌تونیم با استفاده از HOC `injectIntl` به متد `formatDate` توی کامپوننت خودمون دسترسی داشته باشیم. این متد به صورت داخلی توسط `FormattedDate` استفاده میشه و مقدار string تاریخ فرمت بندی شده رو برمی‌گردونه. @@ -4208,7 +4208,7 @@ puppeteer: - می‌تونیم انتظار اجرا به شکل زیر رو داشته باشیم: + می‌تونیم انتظار اجرا به شکل پایین رو داشته باشیم: @@ -4234,7 +4234,7 @@ puppeteer: 147. ### پکیج TestRenderer توی ری‌اکت چیه؟ - این پکیج یه renderer معرفی می‌کنه که می‌تونیم ازش برای رندر کردن کامپوننت‌ها و تبدیل اونا به یه آبجکت pure JavaScript استفاده کنیم بدون اینکه وابستگی به DOM یا محیط اجرایی موبایلی داشته باشیم. این پکیج گرفتن snapshot از سلسله مرتب view(یه چیزی شبیه به درخت DOM) که توسط ReactDOM یا React Native درست میشه رو بدون نیاز به مرورگر یا `jsdom` فراهم می‌کنه. + این پکیج یه renderer معرفی می‌کنه که می‌تونیم ازش برای رندر کردن کامپوننت‌ها و تبدیل اونا به یه آبجکت pure JavaScript استفاده کنیم بدون اینکه وابستگی به DOM یا محیط اجرایی موبایلی داشته باشیم. این پکیج برای گرفتن snapshot از سلسله مرتب view(یه چیزی شبیه به درخت DOM) که توسط ReactDOM یا React Native درست میشه رو بدون نیاز به مرورگر یا `jsdom` فراهم می‌کنه. @@ -4261,13 +4261,13 @@ puppeteer: 148. ### هدف از پکیج ReactTestUtils چیه؟ - پکیج _ReactTestUtils_ توی پکیج `with-addons` ارائه شده و اجازه اجرای یه سری عملیات روی DOMهای شبیه‌سازی شده رو برای انجام یونیت‌ تست‌ها ارائه می‌ده. + _ReactTestUtils_ توی پکیج `with-addons` ارائه شده و اجازه اجرای یه سری عملیات روی DOMهای شبیه‌سازی شده رو برای انجام یونیت‌ تست‌ها ارائه می‌ده. **[فهرست](#فهرست)** 149. ### Jest چیه؟ - _Jest_ یه فریم‌ورک برای یونیت تست کردن جاواسکریپت هستش که توسط فیس بوک و براساس Jasmine ساخته شده. Jest امکان ایجاد اتوماتیک mock(دیتا یا مقدار ثابت برای تست) و محیط `jsdom` رو فراهم می‌کنه و اکثرا برای تست کامپوننت‌ها استفاده میشه. + _Jest_ یه فریم‌ورک برای یونیت تست کردن جاواسکریپت هستش که توسط فیس بوک و براساس Jasmine ساخته شده. Jest امکان ایجاد اتوماتیک mock(دیتا یا مقدار ثابت برای تست) و محیط `jsdom` رو فراهم می‌کنه. **[فهرست](#فهرست)** @@ -4278,8 +4278,8 @@ puppeteer: - می‌تونه به صورت اتوماتیک تست‌ها رو توی سورس کد پیدا و اجرا کنه - به صورت اتوماتیک می‌تونه وابستگی‌هایی که داریم رو mock کنه - امکان تست کد asynchronous رو به شکل synchronously فراهم می‌کنه - - تست‌ها رو با استفاده از یه پیاده‌سازی مصنوعی از DOM(jsdom) اجرا می‌کنه و بواسطه اون تست‌ها قابلیت اجرا توسط cli رو دارن - - تست‌ها به شکل موازی اجرا می‌شن و می‌تونن توی مدت زمان زودتری تموم شن + - تست‌ها رو با استفاده از یه پیاده‌سازی مصنوعی از DOM(jsdom) اجرا می‌کنه و بواسطه اونه که تست‌ها قابلیت اجرا روی cli رو دارن + - تست‌ها به شکل موازی و همزمان اجرا می‌شن و می‌تونن توی مدت زمان زودتری تموم شن **[فهرست](#فهرست)** @@ -4341,7 +4341,7 @@ puppeteer: 152. ### Flux چیه؟ - _Flux_ یه _الگوی طراحی برنامه_ است که به عنوان جایگزینی برای اکثر پترن‌های MVC سنتی به کار میره. در حقیقت یه کتابخونه یا فریم‌ورک نیست و یه معماری برای تکمیل کارکرد ری‌اکت با مفهوم جریان داده یک طرفه(Unidirectional Data Flow) به کار میره. فیس‌بوک از این پترن به شکل داخلی برای توسعه ری‌اکت بهره می‌گیره. + _Flux_ یه الگوی طراحی برنامه‌ـست که به عنوان جایگزینی برای اکثر پترن‌های MVC سنتی به کار میره. در حقیقت یه کتابخونه یا فریم‌ورک نیست و یه معماری برای تکمیل کارکرد ری‌اکت با مفهوم جریان داده یک طرفه(Unidirectional Data Flow) به کار میره. فیس‌بوک از این پترن به شکل داخلی برای توسعه ری‌اکت بهره می‌گیره. جریان کار بین dispatcher، store‌ها و viewهای کامپوننت‌ها با ورودی و خروجی مشخص به شکل زیر خواهد بود: @@ -4351,7 +4351,7 @@ puppeteer: 153. ### Redux چیه؟ - _Redux_ یه state manager(مدیریت کننده حالت) قابل پیش‌بینی برای برنامه‌های جاواسکریپتیه که برپایه دیزاین پترن _Flux_ ایجاد شده. Redux می‌تونه با ری‌اکت یا هر کتابخونه دیگه‌ای استفاده بشه. کم حجمه (حدود 2کیلوبایت) و هیچ وابستگی به کتابخونه دیگه‌ای نداره. + _Redux_ یه state manager(مدیریت کننده حالت) قابل پیش‌بینی برای برنامه‌های جاواسکریپت‌ـه که برپایه دیزاین پترن _Flux_ ایجاد شده. Redux می‌تونه با ری‌اکت یا هر کتابخونه دیگه‌ای استفاده بشه. کم حجمه(حدود 2 کیلوبایت) و هیچ وابستگی به کتابخونه دیگه‌ای نداره. **[فهرست](#فهرست)** @@ -4359,7 +4359,7 @@ puppeteer: Redux از سه اصل بنیادی پیروی می‌کنه: - 1. **یک مرجع کامل و همواره درست:** حالت موجود برا کل برنامه در یک درخت object و توی یه store نگهداری میشه. این یکی بودن store باعث میشه دنبال کردن تغییرات در طول زمان و حتی دیباگ کردن برنامه ساده‌تر باشه. + 1. **یک مرجع کامل و همواره درست:** حالت موجود برا کل برنامه در یک درخت object و توی یه store نگهداری میشه. همین یکی بودن store باعث میشه دنبال کردن تغییرات در زمان توسعه و حتی دیباگ کردن برنامه ساده‌تر باشه. 2. **State فقط قابل خواندن است:** تنها روش ایجاد تغییر در store استفاده از action هستش و نتیجه اجرای این action یک object خواهد بود که رخداد پیش اومده رو توصیف می‌کنه. به این ترتیب مطمئن میشیم که تغییرات فقط با action انجام میشن و هر دیتایی توی store باشه توسط خودمون پر شده. 3. **تغییرات با یه سری تابع pure انجام میشن:** برای مشخص کردن نحوه انجام تغییرات در store باید reducer بنویسیم. Reducerها فقط یه سری توابع pure هستن که حالت قبلی و action رو به عنوان پارامتر می‌گیرن و حالت بعدی رو برگشت میدن. @@ -4421,6 +4421,8 @@ puppeteer: + و البته هوک‌های ریداکس برای دسترسی به state و انجام action مورد نظر هم خیلی کاربرد داره. + **[فهرست](#فهرست)** 157. ### توی ریدیوسر می‌تونیم یه actionی رو dispatch کنیم؟ @@ -4450,7 +4452,7 @@ puppeteer: 1. مدیریت DOM خیلی هزینه‌بر هست و می‌تونه باعث کندی و ناکارآمد شدن برنامه بشه. 2. بخاطر circular dependencies(وابستگی چرخشی) یه مدل پیچیده بین modelها و viewها ایجاد میشه. 3. بخاطر تعامل زیاد برنامه تغییرات خیلی زیادی رخ میده(مثل Google Docs). - 4. هیچ روشی ساده‌ و بدون دردسری برای undo کردن(برگشت به عقب) نیست. + 4. روش ساده‌ و بدون دردسری برای undo کردن(برگشت به عقب) نیست. **[فهرست](#فهرست)** @@ -4498,7 +4500,7 @@ puppeteer: برای دسترسی به دیتای نگهداری شده توی ریداکس باید دو گام زیر رو طی کنیم: 1. **از متد `mapStateToProps` استفاده می‌کنیم** و متغیرهای state که از store می‌خواییم لود کنیم رو مشخص می‌کنیم. - 2. ** با استفاده از متد connect دیتا رو به props میدیم**، چون دیتایی که این HOC میاره به عنوان props به کامپوننت داده میشه. متد `connect` رو هم از پکیج `react-redux` باید بارگذاری کنیم. + 2. **با استفاده از متد connect دیتا رو به props میدیم**، چون دیتایی که این HOC میاره به عنوان props به کامپوننت داده میشه. متد `connect` رو هم از پکیج `react-redux` باید بارگذاری کنیم. @@ -4527,7 +4529,7 @@ puppeteer: لازمه که توی برنامه یه _root reducer_ تعریف کنیم که وظیفه معرفی ریدیوسرهای ایجاد شده با `combineReducers` را دارد. - مثلا بیایین `rootReducer` رو برای‌ستکردن state اولیه با فراخوانی عمل `USER_LOGOUT` تنظیم کنیم. همونطوری که می‌دونیم، به صورت پیش‌فرض ما بنا رو براین میزاریم که reducerها با اجرای مقدار `undefined` به عنوان پارامتر اول initialState رو برمی‌گردونن و حتی actionش هم مهم نیست. + مثلا بیایین `rootReducer` رو برای‌ ست کردن state اولیه با فراخوانی عمل `USER_LOGOUT` تنظیم کنیم. همونطوری که می‌دونیم، به صورت پیش‌فرض ما بنا رو براین میزاریم که reducerها با اجرای مقدار `undefined` به عنوان پارامتر اول initialState رو برمی‌گردونن و حتی actionش هم مهم نیست. @@ -4575,11 +4577,11 @@ puppeteer: 164. ### هدف از کاراکتر @ توی decorator متد connect چیه؟ - کاراکتر(symbol) **@** در حقیقت یه نماد از جاواسکریپت برای مشخص کردن decoratorهاست. _Decorators_ این امکان رو بهمون میده که بتونیم برای کلاس و ویژگی‌های(properties) اون یادداشت‌ها و مدیریت‌کننده‌هایی رو توی زمان طراحی اضافه کنیم. + کاراکتر(symbol) **@** در حقیقت یه نماد از جاواسکریپت برای مشخص کردن decoratorهاست. _Decorator_ها این امکان رو بهمون میده که بتونیم برای کلاس و ویژگی‌های(properties) اون یادداشت‌ها و مدیریت‌کننده‌هایی رو توی زمان طراحی اضافه کنیم. بزارین یه مثال رو برای Redux بزنیم که یه بار از decorator استفاده کنیم و یه بار بدون اون انجامش بدیم. - - **Without decorator:** + - **بدون decorator:** @@ -4638,13 +4640,13 @@ puppeteer: 165. ### تفاوت‌های context و React Redux چیه؟ - می‌تونیم از **Context** برای استفاده از state توی مراحل داخلی کامپوننت‌های nested استفاده کنیم و پارامترهای مورد نظرمون رو تا هر عمقی که دلخواه‌مون هست ببریم و استفاده کنیم، که البته context برای همین امر به وجود اومده. این درحالیه که **Redux** خیلی قدرتمندتره و یه سری‌ ویژگی‌هایی رو بهمون میده که نداره هنوز. بعلاوه، خود React Redux به شکل داخلی از context استفاده می‌کنه ولی به شکل عمومی این موضوع رو نشون نمیده. + می‌تونیم از **Context** برای استفاده از state توی مراحل داخلی کامپوننت‌های nested استفاده کنیم و پارامترهای مورد نظرمون رو تا هر عمقی که دلخواه‌مون هست ببریم و استفاده کنیم، که البته context برای همین امر به وجود اومده. این درحالیه که **Redux** خیلی قدرتمندتره، پلاگین‌های مختلفی داره و یه سری‌ قابلیت‌های حرفه‌ای‌تری رو بهمون میده. بعلاوه، خود React Redux به شکل داخلی از context استفاده می‌کنه ولی به شکل عمومی این موضوع دیده نمیشه. **[فهرست](#فهرست)** 166. ### چرا به توابع state ریداکس reducer میگن؟ - Reducerها همیشه یه مجموعه از stateها رو جمع‌آوری و تحویل میدن(براساس همه actionهای قبلی). برا همین، اونا به عنوان یه سری کاهنده‌های state عمل می‌کنن. هر وقت یه reducer از Redux فراخوانی میشه، state و action به عنوان پارامتر پاس داده میشن و بعدش این state بر اساس actionجاری مقادیرش کاهش یا افزایش داده می‌شوند و بعدش state بعدی برگشت داده میشه. یعنی شما می‌تونین یه مجموعه از داده‌ها رو _reduce_ که به state نهایی که دلخواهتون هست برسین. + Reducerها همیشه یه مجموعه از stateها رو جمع‌آوری و تحویل میدن(براساس همه actionهای قبلی). برای همین، اونا به عنوان یه سری کاهنده‌های state عمل می‌کنن. هر وقت یه reducer از Redux فراخوانی میشه، state و action به عنوان پارامتر پاس داده میشن و بعدش این state بر اساس actionجاری مقادیرش کاهش یا افزایش داده می‌شوند و بعدش state بعدی برگشت داده میشه. یعنی شما می‌تونین یه مجموعه از داده‌ها رو reduce کنین و به state نهایی که دلخواهتون هست برسین. **[فهرست](#فهرست)** @@ -4682,13 +4684,13 @@ puppeteer: 168. ### آیا لازمه همه state همه کامپوننت‌هامونو توی ریداکس نگهداری کنیم؟ - نه لزومی نداره، دیتای برنامه رو میشه توی store ریداکس نگهداری کرد و مسائل مربوط به UI به شکل داخلی توی state کامپوننت‌ها نگهداری بشن. + نه لزومی نداره، دیتاهای عمومی برنامه رو میشه توی store ریداکس نگهداری کرد و مسائل مربوط به UI به شکل داخلی توی state کامپوننت‌ها نگهداری بشن. **[فهرست](#فهرست)** 169. ### روش صحیح برای دسترسی به store ریداکس چیه؟ - بهترین روش برای دسترسی به store و انجام عملیات روی اون استفاده از تابع `connect` هستش که یه کامپوننت جدید ایجاد‌می‌کنه که کامپوننت جاری توی اون قرار داره و دیتای لازم رو بهش پاس میده. این پترن با عنوان **Higher-Order Components** یا کامپوننت‌های مرتبه بالاتر شناخته میشه و یه روش مورد استفاده برای extend کردن کارکرد کامپوننت‌های ری‌اکتی محسوب میشه. این تابع بهمون این امکان رو میده که state و actionهای مورد نظرمون رو به داخل کامپوننت بیاریم و البته به شکل پیوسته با تغییرات اونا کامپوننت‌مون رو به روز کنیم. + بهترین روش، بسته به هر پروژه و هر فرد می‌تونه متفاوت باشه، ترجیح من استفاده از هوک‌های useSelector و useDispatch هستن، برای دسترسی به store و انجام عملیات روی اون استفاده از تابع `connect` هم می‌تونیم استفاده کنیم که یه کامپوننت جدید ایجاد‌ می‌کنه که کامپوننت جاری توی اون قرار داره و دیتای لازم رو بهش پاس میده. این پترن با عنوان **Higher-Order Components** یا کامپوننت‌های مرتبه بالاتر شناخته میشه و یه روش مورد استفاده برای extend کردن کارکرد کامپوننت‌های ری‌اکتی محسوب میشه. این تابع بهمون این امکان رو میده که state و actionهای مورد نظرمون رو به داخل کامپوننت بیاریم و البته به شکل پیوسته با تغییرات اونا کامپوننت‌مون رو به روز کنیم. بیایین یه مثال از کامپوننت `` با استفاده از تابع connect بزنیم: @@ -4714,27 +4716,13 @@ puppeteer: - بخاطر مسائل مربوط به پرفورمنس سازنده‌های ریداکس همیشه `connect` رو بجای استفاده از context API برای دسترسی به store ریداکس توصیه می‌کنن. - - - - ```javascript - class MyComponent { - someMethod() { - doSomethingWith(this.context.store); - } - } - ``` - - - **[فهرست](#فهرست)** 170. ### تفاوت‌های component و container توی ریداکس چی هست؟ - **Component** یه کامپوننت class یا function هست که لایه ظاهری و مربوط به UI برنامه شما توی اون قرار می‌گیره. + - **Component** یه کامپوننت class یا function هست که لایه ظاهری و مربوط به UI برنامه‌مون توی اون قرار می‌گیره. - **Container** یه اصطلاح غیررسمی برای کامپوننت‌هایی هست که به store ریداکس وصل شدن. Containerها به state _subscribe_ می‌کنن یا actionها رو _dispatch_ می‌کنن و هیچ DOM elementای رو رندر نمی‌کنن بلکه کامپوننت‌های UI رو به عنوان child به روز می‌کنن. + - **Container** یه اصطلاح غیررسمی برای کامپوننت‌هایی‌ـه که به store ریداکس وصل شدن. Containerها به state _subscribe_ می‌کنن یا actionها رو _dispatch_ می‌کنن و هیچ DOM elementای رو رندر نمی‌کنن بلکه کامپوننت‌های UI رو به عنوان child به روز می‌کنن. **نکته مهم**: استفاده از این روش تقریبا توی سال ۲۰۱۹ دیگه منقضی محسوب میشه و چون هوک‌های ری‌اکت خیلی راحت می‌تونن دیتا رو توی هر سطح از کامپوننت برامون لود کنن، پس جدا نشدن این دولایه تاثیر چشم‌گیری توی ساده بودن کدها نخواهد داشت و بعضا حتی می‌تونه کار رو سخت‌تر کنه، پس به عنوان مترجم توصیه می‌کنم این کار رو انجام ندین:) @@ -4808,7 +4796,7 @@ puppeteer: 172. ### روش‌های مختلف برای نوشتن mapDispatchToProps چیه؟ - چندین روش برای bind کردن _action_ به متد `dispatch` توی `mapDispatchToProps` هستش که پایین بررسی‌شون می‌کنیم: + چندین روش برای bind کردن action به متد `dispatch` توی `mapDispatchToProps` هستش که پایین بررسی‌شون می‌کنیم: @@ -4816,6 +4804,8 @@ puppeteer: const mapDispatchToProps = (dispatch) => ({ action: () => dispatch(action()), }); + + export default connect(mapStateToProps, mapDispatchToProps)(App); ``` @@ -4826,6 +4816,8 @@ puppeteer: const mapDispatchToProps = (dispatch) => ({ action: bindActionCreators(action, dispatch), }); + + export default connect(mapStateToProps, mapDispatchToProps)(App); ``` @@ -4834,6 +4826,8 @@ puppeteer: ```javascript const mapDispatchToProps = { action }; + + export default connect(mapStateToProps, mapDispatchToProps)(App); ``` @@ -4844,7 +4838,7 @@ puppeteer: 173. ### کاربرد پارامتر ownProps توی mapStateToProps و mapDispatchToProps چیه؟ - اگه پارامتر `ownProps` ارائه شده باشه, ReactRedux پارامترهایی که به کامپوننت پاس داده شدن رو به تابع _connect_ پاس میده. پس اگه یه کامپوننت connect شده مثل کد زیر داشته باشین: + اگه پارامتر `ownProps` ارائه شده باشه، ReactRedux پارامترهایی که به کامپوننت پاس داده شدن رو به تابع connect پاس میده. پس اگه یه کامپوننت connect شده مثل کد زیر داشته باشین: @@ -4904,7 +4898,7 @@ puppeteer: 176. ### مدل ذهنی redux-saga چطوریه؟ - _Saga_ مثل یه thread جداگانه برای برنامه عمل می‌کنه و فقط برای مدیریت ساید افکت کارایی داره. `redux-saga` یه _میان‌افزار_ برای ریداکس هستش، که به معنی اینه که می‌تونه به صورت اتوماتیک توسط actionهای ریداکس شروع بشه، متوقف بشه و یا کار خاصی انجام بده. این میان‌افزار به کل store ریداکس و actionهایی که کار می‌کنن دسترسی داره و می‌تونه هر action دیگه‌ای رو dispatch کنه. + Saga مثل یه thread جداگانه برای برنامه عمل می‌کنه و فقط برای مدیریت ساید افکت کارایی داره. `redux-saga` یه میان‌افزار(middlewaer) برای ریداکس‌ـه، که به معنی اینه که می‌تونه به صورت اتوماتیک توسط actionهای ریداکس شروع بشه، متوقف بشه و یا کار خاصی انجام بده. این میان‌افزار به کل store ریداکس و actionهایی که کار می‌کنن دسترسی داره و می‌تونه هر action دیگه‌ای رو dispatch کنه. **[فهرست](#فهرست)** @@ -4936,27 +4930,27 @@ puppeteer: 178. ### Redux Thunk چیه؟ - میان افزار _Redux Thunk_ بهمون این اجازه رو میده که actionهایی رو بسازیم که به‌جای action عادی تابع‌ برگردونن thunk می‌تونه به عنوان یه ایجاد کننده delay برای dispatch کردن یه action استفاده کنیم، یا حتی با بررسی یه شرط خاص یه action رو dispatch کنیم. تابعی که توی action استفاده میشه و `dispatch` و `getState` رو به عنوان پارامتر ورودی می‌گیره. + میان افزار Redux Thunk بهمون این اجازه رو میده که actionهایی رو بسازیم که به‌جای action عادی تابع‌ برگردونن thunk می‌تونه به عنوان یه ایجاد کننده delay برای dispatch کردن یه action استفاده کنیم، یا حتی با بررسی یه شرط خاص یه action رو dispatch کنیم. تابعی که توی action استفاده میشه و `dispatch` و `getState` رو به عنوان پارامتر ورودی می‌گیره. **[فهرست](#فهرست)** -179. ### تفاوت‌های redux-saga و redux-thunk جیا هستن؟ +179. ### تفاوت‌های redux-saga و redux-thunk چیا هستن؟ - هر دوی _ReduxThunk_ و _ReduxSaga_ می‌تونن مدیریت ساید افکت‌ها رو به دست بگیرن. توی اکثر سناریوها، Thunk از _Promise_ استفاده می‌کنه، درحالیکه Saga از _Generatorها_ استفاده‌می‌کنه. Thunk تقریبا ساده‌تره و promise رو تقریبا همه دولوپرها باهاش آشنا هستن، Sagas/Generators خیلی قوی‌تر هستن و می‌تونن کاربردی‌تر باشن ولی خب لازمه که یاد بگیرینش. هردوی میان‌افزارها می‌تونن خیلی مفید باشن و شما می‌تونین با Thunks شروع کنین و اگه جایی دیدین نیازمندی‌تون رو برآورده نمی‌کنه سراغ Sagas برید. + هر دوی ReduxThunk و ReduxSaga می‌تونن مدیریت ساید افکت‌ها رو به دست بگیرن. توی اکثر سناریوها، Thunk از Promise استفاده می‌کنه، درحالیکه Saga از Generatorها استفاده‌می‌کنه. Thunk تقریبا ساده‌تره و promise رو تقریبا همه دولوپرها باهاش آشنا هستن، در حالی‌که Sagas/Generatorها خیلی قوی‌تر هستن و می‌تونن کاربردی‌تر باشن ولی خب لازمه که یاد بگیرینش. هردوی میان‌افزارها می‌تونن خیلی مفید باشن و شما می‌تونین با Thunks شروع کنین و اگه جایی دیدین نیازمندی‌تون رو برآورده نمی‌کنه سراغ Sagas برید. **[فهرست](#فهرست)** 180. ### Redux DevTools چیه؟ - _ReduxDevTools_ یه محیط برای مشاهده در لحظه تغییرات ریداکس فراهم می‌کنه و قابلیت اجرای مجدد action و یه رابط‌ کاربری قابل شخصی‌سازی رو فراهم می‌کنه. اگه نمی‌خوایین پکیج ReduxDevTools رو نصب کنید می‌تونین از افزونه ReduxDevTools برای Chrome و Firefox استفاده کنین. + ReduxDevTools یه محیط برای مشاهده در لحظه تغییرات ریداکس فراهم می‌کنه و قابلیت اجرای مجدد action و یه رابط‌ کاربری قابل شخصی‌سازی رو فراهم می‌کنه. اگه نمی‌خوایین پکیج ReduxDevTools رو نصب کنید می‌تونین از افزونه ReduxDevTools برای Chrome و Firefox استفاده کنین. **[فهرست](#فهرست)** 181. ### ویژگی‌های Redux DevTools کدوما هستن؟ 1. بهتون اجازه میده که اطلاعات هر state و payload پاس داده شده به action رو مشاهده کنین. - 2. بهتون اجازه میده که actionهای اجرا شده رو _لغو_ کنید. - 3. اگه یه تغییری روی کدهای reducer بدین، هر actionای که _stage_ شده رو مجدد ارزیابی می‌کنه. + 2. بهتون اجازه میده که actionهای اجرا شده رو لغو کنید. + 3. اگه یه تغییری روی کدهای reducer بدین، هر actionای که stage شده رو مجدد ارزیابی می‌کنه. 4. اگه یه reducers یه خطایی بده، میشه متوجه شد که در طی انجام شدن کدوم action این اتفاق افتاده و خطا چی بوده. 5. با `persistState` می‌تونین دیباگ روی موقع reloadهای مختلف ذخیره کنید. @@ -4964,9 +4958,9 @@ puppeteer: 182. ### سلکتورهای ریداکس چی هستن و چرا باید ازشون استفاده کنیم؟ - _Selector_ یه سری تابع هستن که state ریداکس رو به عنوان یه پارامتر دریافت می‌کنه و یه سری داده که میخواییم رو به کامپوننت پاس میده. + Selectorها یه سری تابع هستن که state ریداکس رو به عنوان یه پارامتر دریافت می‌کنه و یه بخش از اون state که میخواییم رو برگشت میده. - برای مثال، دریافت اطلاعات کاربر از ریداکس با selector زیر فراهم میشه: + برای مثال، دریافت اطلاعات کاربر از ریداکس با یه selector مث این می‌تونه فراهم شده باشه: @@ -4980,7 +4974,7 @@ puppeteer: 183. ### Redux Form چیه؟ - _ReduxForm_ با ری‌اکت و ریداکس کار می‌کنه تا همه اطلاعات فرم‌ها رو توی state ریداکس مدیریت کنیم. ReduxForm می‌تونه با inputهای خام HTML5 هم کار کنه، ولی با فریم‌ورک‌های معروف UI مثل Material، ReactWidgets و ReactBootstrap کار کنه. + ReduxForm در کنار ری‌اکت و ریداکس کار می‌کنه تا اطلاعات فرم‌ها رو توی state ریداکس مدیریت کنیم. ReduxForm می‌تونه با inputهای خام HTML5 هم کار کنه، ولی با فریم‌ورک‌های معروف UI مثل Material، ReactWidgets و ReactBootstrap کار کنه. **[فهرست](#فهرست)** @@ -5037,15 +5031,15 @@ puppeteer: 187. ### تفاوت‌های Relay با Redux کدوما هستن؟ - Relay و Redux توی این مورد که دوتاشونم از یه store استفاده می‌کنن شبیه بهم هستن. تفاوت اصلی این دو اینه که relay فقط stateهایی رو مدیریت می‌کنه که از سرور تاثیر گرفتن و همه دسترسی‌هایی که به state مربوطه رو با کوئری‌های _GraphQL_(برای خوندن داده‌ها) و mutationها (برای تغییرات داده) انجام میده. Relay داده‌ها برای شما رو cache می‌کنه و گرفتن داده از سرور رو برای شما بهینه می‌کنه. چون فقط تغییرات رو دریافت میکرد و نه چیز دیگه‌ای. + Relay و Redux توی این مورد که دوتاشونم از یه store استفاده می‌کنن شبیه بهم هستن. تفاوت اصلی این دو اینه که relay فقط stateهایی رو مدیریت می‌کنه که از سرور تاثیر گرفتن و همه دسترسی‌هایی که به state مربوطه رو با کوئری‌های GraphQL(برای خوندن داده‌ها) و mutationها (برای تغییرات داده) انجام میده. Relay داده‌ها برای شما رو cache می‌کنه و گرفتن داده از سرور رو برای شما بهینه می‌کنه. چون فقط تغییرات رو دریافت میکرد و نه چیز دیگه‌ای. ## React Native 188. ### تفاوت‌های React Native و React کدوما هستن؟ - **React** یه کتابخونه جاواسکریپتی هست که از اجرای اون روی frontend و اجرای اون روی سرور برای تولید رابط کاربری و برنامه‌های تحت وب پشتیبانی می‌کنه. + - **React** یه کتابخونه جاواسکریپتی هست که از اجرای اون روی frontend و اجرای اون روی سرور برای تولید رابط کاربری و برنامه‌های تحت وب پشتیبانی می‌کنه. - **React Native** یه فریم‌ورک موبایل هست که کدها رو به کامپوننت‌های native روی موبایل compile می‌کنه و بهمون این اجازه رو میده که برنامه‌های موبایلی(iOS, Android, and Windows) رو با استفاده از جاواسکریپت بسازیم که از ری‌اکت برای تولید کامپوننت استفاده می‌کنه. + - **React Native** یه فریم‌ورک موبایل هست که کدها رو به کامپوننت‌های native روی موبایل compile می‌کنه و بهمون این اجازه رو میده که برنامه‌های موبایلی(iOS, Android, and Windows) رو با استفاده از جاواسکریپت بسازیم که از ری‌اکت برای تولید کامپوننت استفاده می‌کنه. **[فهرست](#فهرست)** @@ -5084,7 +5078,7 @@ puppeteer: 192. ### کتابخونه reselect چیه و چطوری کار می‌کنه؟ - _Reselect_ یه کتابخونه **selector** برای ریداکس هست که از مفهوم _memoization_ استفاده می‌کنه. این کتابخونه به صورت اولیه نوشته شده بوده که داده‌های هر برنامه Redux-like یا شبیه ریداکس رو پردازش کنه، ولی نتونسته با هیچ برنامه یا کتابخونه دیگه‌ای گره بخوره. + Reselect یه کتابخونه کمکی برای **selector**های ریداکس‌ـه که از مفهوم memoization استفاده می‌کنه. این کتابخونه به شکلی نوشته شده بوده که داده‌های هر برنامه Redux-like یا شبیه ریداکس رو پردازش کنه، ولی نتونسته با هیچ برنامه یا کتابخونه دیگه‌ای گره بخوره. Reselect یه کپی از آخرین inputs/outputs از هر فراخوانی رو نگهداری می‌کنه و فقط زمانی اونو دوباره محاسبه می‌کنه که تغییراتی توی ورودی رخ داده باشه. اگه همون ورودی‌ها دوبار استفاده بشن، Reselect مقدار cache شده رو برمی‌گردونه. memoization و cacheای که استفاده میشه تا حد زیادی قابل شخصی سازیه. @@ -5092,19 +5086,19 @@ puppeteer: 193. ### Flow چیه؟ - _Flow_ یه _static type checker_ هستش که طراحی شده تا خطاهای مربوط به نوع‌ها رو توی جاواسکریپت پیدا کنیم. نوع‌های flow می‌تونه خیلی ریزبینانه‌تر از رویکردهای سنتی بررسی نوع عمل کنه. برای مثال، Flow بهمون کمک‌می‌کنه که خطاهای مربوط به دریافت `null` توی برنامه رو کنترل کنیم که توی روش‌های سنتی غیرممکنه تقریبا. + Flow یه static type checker هستش که طراحی شده تا خطاهای مربوط به نوع داده‌ها رو توی جاواسکریپت پیدا کنیم. نوع‌های flow می‌تونه خیلی ریزبینانه‌تر از رویکردهای سنتی بررسی نوع عمل کنه. برای مثال، Flow بهمون کمک‌ می‌کنه که خطاهای مربوط به دریافت `null` توی برنامه رو کنترل کنیم که توی روش‌های سنتی غیرممکنه تقریبا. **[فهرست](#فهرست)** 194. ### تفاوت‌های Flow و PropTypes کدوما هستن؟ - Flow یه _ابزار تجزیه و تحلیل استاتیک_ (static-checker) هستش که از ویژگی‌های بالاتر از زبان استفاده می‌کنه و بهمون کمک‌می‌کنه که به بخش‌های مختلف برنامه نوع اضافه کنیم و خطاهایی که مرتبط با بررسی نوع‌ها هست رو موقع compile ازشون جلوگیری کنیم. PropTypes یه _روش بررسی نوع ساده_ (موقع runtime) هست که روی ری‌اکت اضافه شده. به غیر از نوع‌هایی که به کامپوننت موردنظر به عنوان prop داده شده رو نمی‌تونه بررسی کنه. پس اگه دنبال یه روش برای بررسی نوع منعطف هستیم که توی کل پروژه عمل کنه Flow یا TypeScript روش‌های بهتری هستن. + Flow یه ابزار تجزیه و تحلیل استاتیک(static-checker) هستش که از یه سری ویژگی‌های بیشتر از زبان جاواسکریپت رو پشتیبانی می‌کنه و بهمون کمک‌ می‌کنه که در بخش‌های مختلف برنامه نوع داده‌ها رو اضافه کنیم و خطاهایی که مرتبط با بررسی نوع‌ها هست رو موقع compile ازشون جلوگیری کنیم. PropTypeها یه روش بررسی نوع داده ورودی کامپوننت‌های ساده (موقع runtime) هست که روی ری‌اکت اضافه شدن. PropType به غیر از نوع داده‌‌هایی که به کامپوننت موردنظر به عنوان prop داده شده رو نمی‌تونه بررسی کنه. پس اگه دنبال یه روش برای بررسی نوع داده به شکل منعطف هستیم که توی کل پروژه عمل کنه Flow یا TypeScript روش‌های بهتری هستن. **[فهرست](#فهرست)** 195. ### چطوری از آیکون‌های font-awesome توی ری‌اکت استفاده کنیم؟ - گام‌های زیر برای استفاده از font-awesome توی ری‌اکت باید طی بشه: + به شکل کلی، باید css و فونت آیکون مربوط به font-awesome به پروژه اضافه بشه، می‌تونیم از پکیج این کتابخونه روی npm استفاده کنیم و بگیم که باید گام‌های زیر برای استفاده از font-awesome توی ری‌اکت باید طی بشه: 1. پکیج `font-awesome` رو نصب می‌کنیم: @@ -5142,7 +5136,7 @@ puppeteer: 196. ### React Dev Tools چیه؟ - _ReactDeveloperTools_ بهمون اجازه اینو میده که سلسله مراتب کامپوننت‌های برنامه رو بررسی کنیم و شامل prop و state هم میشه. این مورد به دو روش افزونه (برای Chrome و Firefox) و یه برنامه جانبی مستقل (که با سافاری و مرورگرهای دیگه هم کار می‌کنه) در دسترسه. + ReactDeveloperTools بهمون اجازه اینو میده که سلسله مراتب کامپوننت‌های برنامه رو بررسی کنیم که شامل prop و state هم میشه. این مورد به دو روش افزونه (برای Chrome و Firefox) و یه برنامه جانبی مستقل (که با سافاری و مرورگرهای دیگه هم کار می‌کنه) در دسترسه. پس سه مورد رو می‌تونیم در نظر بگیریم: @@ -5154,7 +5148,7 @@ puppeteer: 197. ### چرا توی کروم devtools برای فایل‌های local لود نمیشه؟ - اگه یه فایل محلی HTML رو توی مرورگر باز کنیم (`file://...`) بعدش لازمه که _ChromeExtensions_ یا همون افزونه‌های کروم رو باز کنیم و چک‌‌باکس `Allow access to file URLs` رو فعال کنیم. + اگه یه فایل محلی HTML رو توی مرورگر باز کنیم (`file://...`) بعدش لازمه که ChromeExtensions یا همون افزونه‌های کروم رو باز کنیم و چک‌‌باکس `Allow access to file URLs` رو فعال کنیم. **[فهرست](#فهرست)** @@ -5218,29 +5212,29 @@ puppeteer: 3. برای تولید برنامه‌های موبایلی هم مناسبه. 4. اطلاعات و راهکارهای مختلفی براش توی دسترسه. - **نکته:** لیست موارد فوق صرفاً اظهار نظر شخصی بوده و براساس تجربه حرفه‌ای ممکن است متفاوت باشد. اما به عنوان پارامترهای پایه مفید هستن + **نکته:** لیست موارد فوق صرفاً اظهار نظر شخصی بوده و براساس تجربه حرفه‌ای ممکن است متفاوت باشد. اما به عنوان پارامترهای پایه مفید هستن - **[فهرست](#فهرست)** + **[فهرست](#فهرست)** 200. ### تفاوت‌های React و Angular کدوما هستن؟ | React | Angular | | ----- | ------- | - | ری‌اکت یه کتابخونه‌ستو فقط یه لایه view داره | Angular یه فریم ورکه و عملکردش کاملا MVC هستش | ری‌اکت رندر سمت سرور رو هم هندل میکنه | AngularJS رندر رو فقط سمت مشتری هندل میکنه ولی Angular 2 و ورژن‌های بالاتر رندر سمت سرور رو هم هندل می‌کنن | ری‌اکت از JSX استفاده میکنه که مثل HTML در js هستش که می‌تونه یکم گیج کننده باشه | Angular رویکرد قالب رو برای HTML دنبال میکنه که باعث میشه کد کوتاه تر و قابل فهم تر باشه | ری‌اکت نیتیو، نوعی از ری‌اکت هستش که برای ساخت برنامه‌های موبایل با سرعت و پایداری بیشتر استفاده میشه | - | در ری‌اکت جریان داده‌ها فقط از یه طریق هستش و به خاطر همین اشکال زدایی راحت تره | در Angular جریان داده‌ها از دو جهته، یعنی اتصال داده‌های دوطرفه بین والدین و فرزندان رو داره و به خاطر همین اشکال زدایی سخت تره | + | ری‌اکت یه کتابخونه‌ست و فقط یه لایه view داره | Angular یه فریم ورکه و عملکردش کاملا MVC هستش | ری‌اکت رندر سمت سرور رو هم هندل میکنه | AngularJS رندر رو فقط سمت مشتری هندل میکنه ولی Angular 2 و ورژن‌های بالاتر رندر سمت سرور رو هم هندل می‌کنن | ری‌اکت از JSX استفاده میکنه که مثل HTML در js هستش که می‌تونه یکم گیج کننده باشه | Angular رویکرد قالب رو برای HTML دنبال میکنه که باعث میشه کد کوتاه تر و قابل فهم تر باشه | ری‌اکت نیتیو، نوعی از ری‌اکت هستش که برای ساخت برنامه‌های موبایل با سرعت و پایداری بیشتر استفاده میشه | + | در ری‌اکت جریان داده‌ها فقط از یه طریق(one-directional) هستش و به همین خاطر اشکال زدایی(debug) راحت تره | در Angular جریان داده‌ها از دو جهته، یعنی اتصال داده‌های دوطرفه بین والدین و فرزندان رو داره و به خاطر همین اشکال زدایی سخت تره | - **نکته:** لیست موارد فوق صرفاً اظهار نظر شخصی بوده و براساس تجربه حرفه‌ای ممکن است متفاوت باشد. اما به عنوان پارامترهای پایه مفید هستند + **نکته:** لیست موارد فوق صرفاً اظهار نظر شخصی بوده و براساس تجربه حرفه‌ای ممکن است متفاوت باشد. اما به عنوان پارامترهای پایه مفید هستند. **[فهرست](#فهرست)** 201. ### چرا تب React در DevTools نشان داده نمی‌شود؟ - موقع بارگیری صفحه، *React DevTools* یه گلوبال به اسم `__REACT_DEVTOOLS_GLOBAL_HOOK__` تنظیم میکنه، بعدش ری‌اکت موقع مقدار دهی اولیه با اون هوک ارتباط برقرار میکنه. اگه وب سایت از ری‌اکت استفاده نکنه یا ری‌اکت نتونه با DevTools ارتباط برقرار کنه اون تب رو نشون نمیده. + موقع لود صفحه، React DevTools یه گلوبال به اسم `__REACT_DEVTOOLS_GLOBAL_HOOK__` تنظیم میکنه، بعدش ری‌اکت موقع مقداردهی اولیه با اون هوک ارتباط برقرار میکنه. اگه وب سایت از ری‌اکت استفاده نکنه یا ری‌اکت نتونه با DevTools ارتباط برقرار کنه اون تب رو نشون نمیده. **[فهرست](#فهرست)** 202. ### Styled components چیه؟ - `styled-components` یه کتابخونه جاواسکریپته برای طراحی ظاهر برنامه‌های ری‌اکت. نقشه برداری بین استایل‌ها و کامپوننت‌ها رو حذف میکنه و بهمون این امکان رو میده که css واقعی رو با جاواسکریپت بنویسیم. + `styled-components` یه کتابخونه جاواسکریپت‌ـه برای طراحی ظاهر برنامه‌های ری‌اکت، پیچیدگی بین استایل‌ها و کامپوننت‌ها رو حذف میکنه و بهمون این امکان رو میده که کامپوننت‌هایی رو تولید کنیم که نگران استایل‌شون نیستیم و خیال‌مون راحته که استایل‌شون کنار خودشون منتقل میشن و css واقعی رو با جاواسکریپت بنویسیم. **[فهرست](#فهرست)** @@ -5276,7 +5270,7 @@ puppeteer: ```jsx harmony - {'Lets start first styled component!'} + Lets start first styled component! ``` @@ -5286,13 +5280,13 @@ puppeteer: 204. ### Relay چیه؟ - Relay یه فریم ورک جاواسکریپت هستش برای ارائه یه لایه داده و ارتباط client-server به برنامه‌های وب با استفاده از لایه view ری‌اکت. + Relay یه فریم ورک جاواسکریپت‌‌ـه که برای ارائه یک لایه داده و ارتباط client-server به برنامه‌های وب با استفاده از لایه view ری‌اکت استفاده میشه. **[فهرست](#فهرست)** 205. ### چطوری میشه از تایپ اسکریپت توی create-react-app استفاده کرد؟ - با شروع از react-scripts@2.1.0 یا بالاتر، یه پشتیبان داخلی برای typescript وجود داره. میتونیم گزینه `--typescript` رو به صورت زیر منتقل کنیم. + از نسخه react-scripts@2.1.0 به بالاتر، پشتیبانی به شکل داخلی برای typescript وجود داره. میتونیم پارامتر `--typescript` رو به صورت زیر به این اسکریپت پاس بدیم: @@ -5305,7 +5299,8 @@ puppeteer: ``` - ولی برای ورژن‌های پایین تر وقتی داریم یه پروژه جدید می سازیم react scripts، گزینه `--scripts-version` رو به عنوان `react-scripts-ts` تنظیم می‌کنیم. `react-scripts-ts` مجموعه ای از تنظیمات برای گرفتن پروژه `create-react-app` و آوردن typeScript داخلش هست. + + ولی برای ورژن‌های پایین‌تر وقتی داریم یه پروژه جدید می سازیم react scripts، گزینه `--scripts-version` رو به عنوان `react-scripts-ts` تنظیم می‌کنیم. `react-scripts-ts` مجموعه ای از تنظیمات برای گرفتن پروژه `create-react-app` و آوردن typeScript داخلش هست. حالا ساختار پروژه باید این شکلی باشه: @@ -5327,14 +5322,18 @@ puppeteer: ``` + + **[فهرست](#فهرست)** ## متفرقه 206. ### اصلی‌ترین ویژگی‌های کتابخونه reselect کدوما هستن؟ 1. Selector‌ها داده‌های مشتق شده رو محاسبه میکنه و به ریداکس اجازه میدن حداقل state‌های ممکن رو ذخیره کنه. - 2. Selector‌‌ها کارامد هستن. یه selector تا وقتی که یکی از آرگومان هاش تغییر نکرده معتبر نیست. - 3. Selector‌ها قابل ترکیب هستن. اونا می تونن به عنوان ورودی برای بقیه Selector‌ها استفاده بشن. + 2. Selector‌‌ها memoize شده هستن و یه selector تا وقتی که یکی از آرگومان‌هاش تغییر نکرده معتبر نیست. + 3. Selector‌ها قابل ترکیب هستن یعنی می‌تونن به عنوان ورودی برای بقیه Selector‌ها استفاده بشن. + + **[فهرست](#فهرست)** 207. ### یه مثال از کارکرد کتابخونه reselect بزن؟ @@ -5386,9 +5385,9 @@ puppeteer: 208. ### توی Redux اکشن چیکار می‌کنه؟ - *اکشن*‌ها آبجکت‌های ساده جاواسکریپت یا اطلاعاتی هستن که داده‌ها رو از برنامه به store میفرستن. اونا تنها منابع اطلاعاتی برای store هستن. اکشن باید یه ویژگی type داشته باشه که نوع اکشنی که انجام میشه رو نشون بده. + اکشن‌ها آبجکت‌های ساده جاواسکریپت یا اطلاعاتی هستن که داده‌ها رو از برنامه به store میفرستن. اونا تنها منابع اطلاعاتی برای store هستن. اکشن باید یه ویژگی type داشته باشه که نوع اکشن‌ای که انجام میشه رو نشون بده. - برای مثال اکشنی که نشون میده یه آیتم todo جدید اضافه شده: + برای مثال اکشن‌ای که نشون میده یه آیتم todo جدید اضافه شده، می‌تونه این شکلی باشه: @@ -5401,11 +5400,24 @@ puppeteer: + البته یه استانداردی هست که برای داده‌ای که می‌خواییم منتقل کنیم اسم متغیر انتخاب نکنیم و از ویژگی payload براش استفاده کنیم، مثال فوق با این استاندارد به شکل زیر می‌تونه پیاده‌سازی بشه: + + + + ```javascript + { + type: 'ADD_TODO', + payload: 'Add todo item' + } + ``` + + + **[فهرست](#فهرست)** 209. ### استاتیک شی با کلاس‌های ES6 در React کار می کنه؟ - خیر، `استاتیک ها` فقط با `React.createClass()` کار می‌کنن: + خیر، استاتیک‌ها فقط با `React.createClass` کار می‌کنن: @@ -5455,13 +5467,13 @@ puppeteer: 210. ### ریداکس رو فقط با ری‌اکت میشه استفاده کرد؟ - ریداگس می‌تونه به عنوان یه ذخیره داده برای لایه UI استفاده بشه. رایج ترین کاربرد ریداکس برای ری‌اکت و ری‌اکت نیتیو هستش، ولی اتصالاتی هم برای Angular، Angular 2، Vue، Mithril و موارد دیگه موجوده. ریداکس به راحتی یه مکانیسم اشتراکی ارائه میده که می‌تونه برای کد‌های دیگه هم استفاده بشه. + ریداکس می‌تونه به عنوان یه محل برای ذخیره داده برای لایه UI استفاده بشه. رایج ترین کاربرد ریداکس برای ری‌اکت و ری‌اکت نیتیو هستش، ولی یه سری کارهایی هم برای هماهنگ کردنش با Angular، Angular 2، Vue، Mithril و موارد دیگه موجوده. ریداکس به راحتی یه مکانیسم اشتراکی ارائه میده که می‌تونه برای کد‌های دیگه هم استفاده بشه. **[فهرست](#فهرست)** 211. ### برای استفاده از Redux به ابزار build خاصی احتیاج داریم؟ - ریداکس در اصل توی ES6‌ نوشته شده و برای تولید توی ES5 با Webpack و Babel منتشر شده. ما باید بتونیم بدون توجه به مراحل ساخت جاواسکریپت از اون استفاده کنیم. ریداکس همینطور یه ساختار UMD ارائه میده که می‌تونه مستقیم و بدون هیچگونه مراحل ساخت مورد استفاده قرار بگیره. + ریداکس در اصل توی ES6‌ نوشته شده و برای build روی ES5 با Webpack و Babel کار کردن، در حقیقت ما باید بتونیم بدون توجه به مراحل و نسخه جاواسکریپت ازش استفاده کنیم. ریداکس همینطور یه ساختار UMD ارائه میده که می‌تونه مستقیم و بدون هیچگونه وابستگی به شکل مستقیم روی مرورگر مورد استفاده قرار بگیره. **[فهرست](#فهرست)** @@ -5480,13 +5492,13 @@ puppeteer: - اگه prop ‍‍`initialValues` به روز بشه، فرممون هم به روز میشه. + اگه prop ‍‍`initialValues` به روز بشه، فرم‌مون هم به روز میشه. **[فهرست](#فهرست)** 213. ### توی PropTypeهای ری‌اکت چطوری میشه برای یه prop چند نوع داده مجاز مشخص کرد؟ - می‌تونیم از یکی از متد‌های `PropTypes` به اسم `oneOfType()` استفاده کنیم. + می‌تونیم از یکی از متد‌های `PropTypes` به اسم `oneOfType` استفاده کنیم. برای مثال، ویژگی height رو می‌تونیم با دو نوع `string` یا `number` مثل زیر تعریف کنیم: @@ -5589,17 +5601,22 @@ puppeteer: 216. ### render hijacking توی ری‌اکت چیه؟ - مفهوم render hijacking توانایی کنترل اینه که چه کامپوننتی خروجی بقیه کامپوننت هاست. در واقع به این معنیه که ما می‌تونیم با قرار دادن کامپوننت خودمون توی یه کامپوننت با اولویت بالا یه تغییراتی بهش بدیم، مثلا یه سری prop بهش اضافه کنیم یا تغییرات دیگه ای که باعث تغییر منطق رندر بشه. این در واقع hijacking رو فعال نمیکنه اما با استفاده ار HOC این امکان رو فراهم می‌کنیم که کامپوننت رفتار متفاوتی داشته باشه. + مفهوم render hijacking به معنی توانایی کنترل اینکه چه کامپوننتی خروجی بقیه رندر شدن یه کامپوننت دیگه باشه هست. در واقع ما می‌تونیم با قرار دادن کامپوننت خودمون توی یه کامپوننت با اولویت بالا(HOC) یه تغییراتی بهش بدیم، مثلا یه سری prop بهش اضافه کنیم یا تغییرات دیگه‌ای که باعث تغییر منطق رندر بشه. HOC در واقع hijacking رو فعال نمیکنه اما با استفاده از HOC این امکان رو فراهم می‌کنیم که کامپوننت بتونه رفتار متفاوتی رو موقع رندر داشته باشه. **[فهرست](#فهرست)** 217. ### پیاده‌سازی factory یا سازنده HOC چطوریه؟ - دو روش اصلی برای اجرای HOC‌ها توی ری‌اکت وجود داره. 1. Props Proxy (PP) و 2. Inheritance Inversion (II). اونا روش‌های مختلفی رو برای اداره کردن *WrappedComponent* دنبال می کنن. + دو روش اصلی برای اجرای HOC‌ها توی ری‌اکت وجود داره: + + 1. Props Proxy (PP) + 2. Inheritance Inversion (II). + + این دو روش‌ امکان مدیریت و کنترل **WrappedComponent** به شکل‌های مختلف رو فراهم می کنن. **Props Proxy** - تو این روش، متد رندر HOC یه عنصر ری‌اکت از نوع WrappedComponent رو برمی گردونه. ما هم propهایی که HOC دریافت میکنه رو انتقال میدیم، به خاطر همین بهش **Props Proxy** گفته میشه. + تو این روش، متد رندر HOC یه عنصر ری‌اکت از نوع WrappedComponent رو برمی گردونه که در واقع همون کامپوننت اصلی هست که از پارامتر ورودی تابع گرفتیم. با رندر کردن اون کامپوننت توسط این تابع، propهایی که HOC دریافت میکنه رو به کامپوننت انتقال میدیم و می‌تونیم propهای دیگه‌ای هم بهش اضافه کنیم، به خاطر همین بهش **Props Proxy** گفته میشه. @@ -5615,9 +5632,10 @@ puppeteer: ``` + **Inheritance Inversion** - In this approach, the returned HOC class (Enhancer) extends the WrappedComponent. It is called Inheritance Inversion because instead of the WrappedComponent extending some Enhancer class, it is passively extended by the Enhancer. In this way the relationship between them seems **inverse**. + توی این روش، کلاس HOC برگشت داده شده(Enhancer) از WrappedComponent دریافت شده extend میشه و به همین دلیل می‌تونیم به متدهای اون کامپوننت دسترسی داشته باشیم و با این دسترسی خیلی راحت می‌تونیم متد render رو هم فراخوانی کنیم. @@ -5651,9 +5669,9 @@ puppeteer: 219. ### لازمه همه stateها رو توی ریداکس مدیریت کنیم؟ لزومی به استفاده از state داخلی داریم؟ - این به تصمیم توسعه دهنده بستگی داره. به عنوان مثال این وظیفه توسعه دهنده‌ستکه بررسی کنه چه نوعی از state‌ها برنامه رو تشکیل بده و هر state کجا باید قرار بگیره. بعضی از کاربرا ترجیح میدن هر قسمت از داده رو توی ریداکس نگه دارن، تا همیشه یه ورژن پشت سر هم و کنترل شده از برنامه شون رو داشته باشن. یه عده دیگه ترجیح میدن UI State یا non-critical رو نگه دارن، مثل “is this dropdown currently open”، توی state داخلی یه کامپوننت. + این به تصمیم توسعه دهنده بستگی داره ولی بهتره که از عمومی سازی داده‌های غیرضروری خودداری کنین. این وظیفه توسعه دهنده‌ست که بررسی کنه چه نوعی از state‌ها برنامه رو تشکیل بده و هر state کجا باید قرار بگیره. به شکل کلی این شرط‌ها رو قبل از انتقال state لوکال به state عمومی بررسی کنین: - اینا قوانینی هستن که تعیین می کنن چه نوع داده ای باید توی ریداکس قرار بگیره + اینا قوانینی هستن که تعیین می کنن چه نوع داده ای باید توی ریداکس قرار بگیره 1. آیا بقیه قسمتای برنامه به این داده‌ها اهمیت میدن؟ 2. آیا نیازه که بتونیم یه سری داده‌ها رو از روی این داده‌های اصلی به دست بیاریم؟ 3. آیا از این داده‌ها توی چندین کامپوننت استفاده میشه؟ @@ -5664,7 +5682,7 @@ puppeteer: 220. ### هدف از متد registerServiceWorker توی ری‌اکت چیه؟ - ری‌اکت به صورت پیش فرض و بدون هیچگونه پیکربندی، یه سرویس دهنده برامون ایجاد میکنه. سرویس دهنده یه API وب هستش که در ذخیره کردن asset‌ها و فایل‌های دیگه بهمون کمک میکنه تا وقتی کاربر آفلاینه یا سرعت اینترنتش پایینه، بازم بتونه نتایج رو روی صفحه ببینه. به این ترتیب بهمون کمک میکنه تجربه کاربری بهتری ایجاد کنیم و همون چیزیه که باید در مورد service worker‌ها بدونیم. این‌ها همه مواردی بود در رابطه با اضافه کردن قابلیت‌های آفلاین به سایتمون. + ری‌اکت به صورت پیش فرض و بدون هیچگونه پیکربندی، یه ServiceWorker برامون ایجاد میکنه. ServiceWorker یه API وب هستش که توی ذخیره کردن asset‌ها و فایل‌های دیگه بهمون کمک می‌کنه تا وقتی کاربر آفلاینه یا سرعت اینترنتش پایینه، بازم بتونه نتایج رو روی صفحه ببینه. به این ترتیب بهمون کمک میکنه تا تجربه کاربری بهتری ایجاد کنیم. با استفاده از متد registerServiceWorker که ری‌اکت فراهم می‌کنه، سرویس خودمون رو روی مرورگر کاربر نصب می‌کنیم و می‌تونیم از مزایایی که گفتیم بهره‌مند بشیم. @@ -5684,20 +5702,17 @@ puppeteer: 223. ### چطوری با استفاده از تابع setState از رندر غیرضروری جلوگیری کنیم؟ - می‌تونیم مقدار فعلی یه state رو با مقدار موجود مقایسه کنیم و تصمیم بگیریم که صفحه مجددا رندر بشه یا نه. اگه مقادیر یکسان بود برای جلوگیری از رندر مجدد باید مقدار null رو برگردونیم و در غیر این صورت آخرین مقدار state‌ رو برمی گردونیم. برای مثال، اطلاعات پروفایل کاربر توی مثال زیر به صورت شرطی رندر شده: + می‌تونیم مقدار فعلی یه state رو با مقدار موجود مقایسه کنیم و تصمیم بگیریم که state رو تغییر بدیم یا نه. میدونیم اگه یه setState غیر ضروری انجام بدیم، کامپوننت‌مون ری‌رندر میشه پس اگه مقادیر یکسان بود برای جلوگیری از رندر مجدد نباید استیت رو مجددا ست کنیم. برای مثال، اطلاعات پروفایل کاربر توی مثال زیر به صورت شرطی رندر شده: ```jsx - getUserProfile = (user) => { + const getUserAddress = (user) => { const latestAddress = user.address; - this.setState((state) => { - if (state.address === latestAddress) { - return null; - } else { - return { title: latestAddress }; - } - }); + + if (address !== latestAddress) { + setAddress(address); + } }; ``` @@ -5707,8 +5722,8 @@ puppeteer: 224. ### توی نسخه ۱۶ ری‌اکت چطوری میشه آرایه، Strings و یا عدد رو رندر کنیم؟ - **آرایه ها**: بر خلاف نسخه‌های قدیمی، نیازی نیست مطمعن بشیم که متد **render** یه عنصری رو توی ری اکت 16 برمیگردونه. - میتونیم عناصر شبیه هم رو بدون نیاز به عنصر بسته بندی به عنوان یه آرایه برگردونیم. به عنوان مثال، بیاین لیست توسعه دهندگان زیر رو بگیریم، + **آرایه‌ها**: از نسخه ۱۶ به بالای ری‌اکت، بر خلاف نسخه‌های قدیمی، نیازی نیست مطمئن بشیم که کامپوننت‌مون یه المنت یا کامپوننت ری‌اکت برمی‌گردونه. + می‌تونیم عناصر شبیه هم رو بدون نیاز به عنصر بسته بندی به عنوان یه آرایه برگردونیم. به عنوان مثال، بیاین لیست توسعه دهندگان زیر رو در نظر بگیریم: @@ -5723,7 +5738,8 @@ puppeteer: ``` - همینطور میتونیم آیتم‌های این آرایه رو توی یه کامپوننت دیگه ای ادغام کنیم + + به همین شکل می‌تونیم آیتم‌های این آرایه رو توی یه کامپوننت دیگه‌ ادغام کنیم: @@ -5741,16 +5757,19 @@ puppeteer: ``` - **رشته‌ها و اعداد:** همینطور می‌تونیم انواع رشته‌ها و اعداد رو با متد رندر برگردونیم + + **رشته‌ها و اعداد:** می‌تونیم انواع رشته‌ها و اعداد رو با توی کامپوننت‌مون رندر کنیم: ```jsx - render() { - return 'Welcome to ReactJS questions'; + // String + const StringComponent = () => { + return 'Welcome to ReactJS questions'; } + // Number - render() { + const NumberComponent = () => { return 2018; } ``` @@ -5759,48 +5778,9 @@ puppeteer: **[فهرست](#فهرست)** -225. ### چطوری میشه از تعریف ویژگی در کلاس کامپوننت استفاده کرد؟ - - 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, - - - - ```jsx - class Counter extends Component { - state = { value: 0 }; - - handleIncrement = () => { - this.setState((prevState) => ({ - value: prevState.value + 1, - })); - }; - - handleDecrement = () => { - this.setState((prevState) => ({ - value: prevState.value - 1, - })); - }; - - render() { - return ( -
- {this.state.value} - - - -
- ); - } - } - ``` - - - - **[فهرست](#فهرست)** - 226. ### hookها چی هستن؟ - هوک‌ها ویژگی جدیدی هستن که بهمون این امکان رو میدن که بدون نوشتن کلاس از state‌ و ویژگی‌های دیگه ری اکت استفاده کنیم. + تا اینجای مثال‌ها بارها از هوک‌ها استفاده کردیم، هوک‌ها بهمون این امکان رو میدن که بدون نوشتن کلاس از state‌ و ویژگی‌های دیگه ری اکت استفاده کنیم. بیاین یه مثال از هوک useState ببینیم: @@ -5827,10 +5807,10 @@ puppeteer: 227. ### چه قوانینی برای هوک‌ها باید رعایت بشن؟ - برای استفاده از هوک‌ها باید از دو قانون پیروی کنیم + برای استفاده از هوک‌ها باید از دو قانون پیروی کنیم: - 1. هوک‌ها رو فقط در سطح بالای توابع ری اکت صدا کنیم. یعنی نباید هوک‌ها رو توی حلقه ها، شرط‌ها یا توابع تودرتو صدا کنیم. با این کار اطمینان حاصل میشه که هوک‌ها با هر بار رندر کامپوننت به همون ترتیب صدا زده میشن و state‌ هوک‌ها بین چندین بار استفاده از useState , useEffect حفظ میشه. - 2. هوک‌ها رو فقط توی ری اکت میتونیم استفاده کنیم. توی توابع جاوااسکریپتی نباید هوک‌ها رو صدا بزنیم. + 1. هوک‌ها رو فقط در ابتدای کامپوننت‌ها صدا کنیم. یعنی نباید هوک‌ها رو توی حلقه‌ها، داخل یا بعد ازشرط‌ها یا توابع تودرتو استفاده کنیم. با این کار اطمینان حاصل میشه که هوک‌ها با هر بار رندر کامپوننت به همون ترتیب صدا زده میشن و state‌ هوک‌ها بین رندرهای مختلف از useState ،useEffect حفظ میشه. + 2. هوک‌ها رو فقط داخل کامپوننت ری‌اکت می‌تونیم استفاده کنیم. توی توابع جاواسکریپت و خارج از درخت کامپوننت‌ها نباید هوک‌ها رو صدا بزنیم. **[فهرست](#فهرست)** @@ -5845,7 +5825,8 @@ puppeteer: ``` - و تنظیمات زیر رو توی فایل ESLint config اعمال کنیم + + و تنظیمات زیر رو توی فایل ESLint config اعمال کنیم @@ -5864,6 +5845,7 @@ puppeteer: ``` + **نکته** این پلاگین به صورت پیش فرض در نظر گرفته شده تا در ساخت React App ازش استفاده کنیم. **[فهرست](#فهرست)** @@ -5879,7 +5861,7 @@ puppeteer: | Store‌های مختلفی وجود داره | فقط یه Store وجود داره | | تمام Store‌ها جدا از هم هستن | یه Store با Reducer‌های سلسله مراتبی | | یه dispatcher تکی داره | مفهومی به اسم dispatcher وجود نداره | - | React components subscribe to the store | کامپوننت‌های Container از تابع connect استفاده می کنن. | + | کامپوننت ری‌اکت به store میاد و subscribe میکنه | کامپوننت‌های Container از تابع connect استفاده می کنن. | **[فهرست](#فهرست)** @@ -5887,24 +5869,25 @@ puppeteer: اینجا مزایای اصلی ماژول React Router V4 گفته شده: - 1. توی React Router ورژن ۴، API کلا در مورد کامپوننت هاست. یه Router می‌تونیم به عنوان یه کامپوننت تکی () تجسم کنیم که کامپوننت‌های روتر فرزند () رو دسته بندی میکنه. - 2. نیازی به تنظیم دستی history‌ نداریم. روتر از طریق بسته بندی route‌ها با کامپوننت از history مراقبت میکنه. - 3. اندازه برنامه فقط با یه ماژول روتر خاص (Web, core یا native) کاهش پیدا میکنه. + 1. توی React Router ورژن ۴، API کلا در مورد کامپوننت هاست. یه Router می‌تونیم به عنوان یه کامپوننت تکی (``) تجسم کنیم که کامپوننت‌های روتر فرزند (``) رو دسته بندی میکنه. + 2. نیازی به تنظیم دستی history‌ نداریم. روتر از طریق بسته بندی route‌ها با کامپوننت از history نگهداری میکنه. + 3. اندازه برنامه فقط به یه ماژول روتر خاص (Web, core یا native) کاهش پیدا میکنه. **[فهرست](#فهرست)** 231. ### می‌تونی راجع به متد componentDidCatch توضیح بدی؟ - بعد از اینکه خطایی توسط یه کامپوننت با سلسله مراتب پایین تر ارسال شد، متد **componentDidCatch** صدا زده میشه. این متد دو تا پارامتر دریافت میکنه: + بعد از اینکه یه خطا داخل یه کامپوننت با سلسله مراتب پایین‌تر رخ داد، متد **componentDidCatch** صدا زده میشه. این متد دو تا پارامتر دریافت میکنه: - 1. error: - آبجکت error - 2. info: - یه آبجکت با کلید componentStack که شامل اطلاعاتیه در مورد اینکه کدوم کامپوننت خطا ایجاد کرده. + 1. error: آبجکت error + 2. info: یه آبجکت با کلید componentStack که شامل اطلاعاتیه در مورد اینکه کدوم کامپوننت خطا ایجاد کرده. ساختار متد به صورت زیر هستش: + ```javascript - componentDidCatch(error, info); + componentDidCatch(error, info) ``` @@ -5915,18 +5898,17 @@ puppeteer: این‌ها مواردی هستن که error boundary‌ها اونجا کار نمی کنن - 1. داخل Event handler ها - 2. کد ناهمزمان با استفاده از callback‌‌های **setTimeout یا requestAnimationFrame** - 3. During Server side rendering - 3. موقع ارائه سمت سرور (Server side rendering) + 1. داخل Event handlerها. + 2. کد ناهمزمان با استفاده از callback‌‌های **setTimeout یا requestAnimationFrame**. + 3. موقع ارائه سمت سرور (Server side rendering). 4. وقتی خطاها در خود کد error boundary‌ها رخ میده. **[فهرست](#فهرست)** 233. ### چرا نیازی به error boundaries برای event handlerها نیست؟ - Error boundary‌‌ها خطاها رو توی event handler‌ها نمی گیرن. Event handler‌ها بر خلاف متد رندر یا lifecycle موقع رندر کردن اتفاق نمی افته یا فراخوانی نمیشه. بنابراین ری اکت میدونه که این مدل خطا‌ها رو توی event handler‌ها چطوری بازیابی کنه. - اگه هنوز نیاز داریم خطا رو توی event handler بگیریم، می‌تونیم از دستور try / catch جاوااسکریپت مثل زیر استفاده کنیم: + Error boundary‌‌ها خطاها رو توی event handler‌ها نمی گیرن. Event handler‌ها بر خلاف متد رندر یا lifecycle موقع رندر کردن اتفاق نمی‌افته یا فراخوانی نمیشه. بنابراین ری اکت میدونه که این مدل خطا‌ها رو توی event handler‌ها چطوری بازیابی کنه. + اگه هنوز نیاز داریم خطا رو توی event handler بگیریم، می‌تونیم از دستور try / catch جاواسکریپت مثل زیر استفاده کنیم: @@ -5955,14 +5937,15 @@ puppeteer: ``` - کد بالا خطا رو با استفاده از try/catch جاوااسکریپت به جای error boundary ‌ها میگیره. + + کد بالا خطا رو با استفاده از try/catch جاواسکریپت به جای error boundaryها میگیره. **[فهرست](#فهرست)** 234. ### تفاوت بلوک try catch و error boundaryها چیه؟ - بلوک try catch با کد دستوری کار میکنه در حالی که error boundary‌ها برای ارائه کد اعلانی روی صفحه در نظر گرفته شدن. - برای مثال، بلوک try catch برای کد دستوری زیر استفاده میشه + بلوک try..catch با نوشتن کد دستوری دور هر بخش از برنامه کار میکنه در حالی که error boundary‌ها برای رندر کردن یه رابط کاربری پشتیبان روی صفحه در نظر گرفته شدن. + برای مثال، بلوک try catch به شکل کد دستوری زیر استفاده میشه: @@ -5976,7 +5959,7 @@ puppeteer: - در حالی که error boundary‌ها کد‌های اعلانی رو به صورت زیر بسته بندی می کنه، + در حالی که error boundary‌ها رابط کاربری رو به شکل پایین مدیریت می کنه: @@ -5988,19 +5971,19 @@ puppeteer: - پس اگه خطایی توی متد **componentDidUpdate** توسط **setState** جایی در عمق درخت، رخ بده بازم به درستی به نزدیک ترین error boundary گسترش پیدا میکنه. + پس اگه خطایی توی متد **componentDidUpdate** توسط **setState** جایی در عمق درخت، رخ بده بازم به درستی به نزدیک‌ترین error boundary گسترش پیدا میکنه. **[فهرست](#فهرست)** 235. ### رفتار خطاهای uncaught در ری‌اکت 16 چیه؟ - توی ری اکت ورژن ۱۶، خطاهایی که توسط هیچ error boundary گرفته نشن، منجر به unmount شدن کل درخت کامپوننت ری اکت میشن.دلیل این تصمیم اینه که رابط کاربری خراب بهتره که کامل حذف بشه تا اینکه سر جای خودش باقی بمونه.به عنوان مثال، برای یه برنامه پرداخت بهتره گه هیچی رندر نکنیم تا اینکه بخوایم یه مقدار اشتباه رو نشون بدیم. + توی ری اکت ورژن ۱۶، خطاهایی که توسط هیچ error boundary گرفته نشن، منجر به unmount شدن کل درخت کامپوننت ری اکت میشن.دلیل این تصمیم اینه که رابط کاربری خراب بهتره که کامل حذف بشه تا اینکه سر جای خودش باقی بمونه.به عنوان مثال، برای یه برنامه پرداخت بهتره که هیچی رندر نکنیم تا اینکه بخوایم یه مقدار اشتباه رو نشون بدیم. **[فهرست](#فهرست)** 236. ### محل مناسب برای قرار دادن error boundary کجاست؟ - میزان استفاده از error boundary‌ها بر اساس نیاز پروژه به عهده توسعه دهنده ست. می‌تونیم از هر کدوم از روش‌های زیر استفاده کنیم + میزان و محل استفاده از error boundary‌ها بر اساس نیاز پروژه به عهده توسعه دهنده‌ست. می‌تونیم از هر کدوم از روش‌های زیر استفاده کنیم: 1. می‌تونیم روت کامپوننت‌های سطح بالا رو برای نمایش یه پیغام خطای عمومی واسه کل برنامه بسته بندی کنیم. 2. همین طور می‌تونیم کامپوننت‌های تکی رو توی یه error boundary قرار بدیم تا از خراب شدن کل برنامه محافظت بشه. @@ -6009,7 +5992,7 @@ puppeteer: 237. ### مزیت چاپ شدن stack trace کامپوننت‌ها توی متن ارور boundary ری‌اکت چیه؟ - به غیر از پیام‌های خطا و پشته جاوااسکریپت، ری اکت ورژن ۱۶ پشته کامپوننت رو با نام فایل و شماره خط با استفاده از مفهوم error boundary نمایش میده. برای مثال، کامپوننت BuggyCounter پشته کامپوننت رو به صورت زیر نشون میده: + به غیر از پیام‌های خطا و پشته جاواسکریپت، ری اکت ورژن ۱۶ پشته کامپوننت رو با نام فایل و شماره خط با استفاده از مفهوم error boundary نمایش میده. برای مثال، کامپوننت BuggyCounter پشته کامپوننت رو به صورت زیر نشون میده: ![stacktrace](images/error_boundary.png) @@ -6017,7 +6000,7 @@ puppeteer: 238. ### متدی که در تعریف کامپوننت‌های class الزامیه؟ - متد render() تنها متد مورد نیاز توی class کامپوننت هستش. به عنوان مثال، همه متد‌ها غیر از متد render توی class‌ کامپوننت اختیاری هستش. + متد render تنها متد مورد نیاز توی class کامپوننت هستش. به عنوان مثال، همه متد‌ها غیر از متد render توی class‌ کامپوننت اختیاری هستش. **[فهرست](#فهرست)** @@ -6025,11 +6008,11 @@ puppeteer: اینجا لیستی از انواع type‌‌های استفاده شده و برگشت داده شده توسط متد رندر نوشته شده: - 1. **عناصر ری اکت** عناصری که به ری اکت دستور میدن تا یه گره DOM رو رندر کنه. این عناصر شامل عناصر html مثل `
` و عناصر تعریف شده توسط کاربر هستش. - 2. **Arrays and fragments:** Return multiple elements to render as Arrays and Fragments to wrap multiple elements - 3. **Portals** فرزند‌ها رو داخل یه زیرشاخه DOM‌ متفاوت رندر میکنه - 4. **رشته‌ها و اعداد** رشته‌ها و اعداد رو به عنوان گره متنی توی DOM رندر میکنه. - 5. **‌Boolean یا null** چیزی رندر نمیکنه اما از این type برای رندر کردن محتوای شرطی استفاده میشه. + 1. **عناصر ری اکت**: عناصری که به ری اکت دستور میدن تا یه گره DOM رو رندر کنه. این عناصر شامل عناصر html مثل `
` و عناصر تعریف شده توسط کاربر هستش. + 2. **آرایه‌ها و fragmentها:** میتونیم بجای بازگرداندن چندین عنصر، یه آرایه از اونا برگردونیم و اگه چندتا عنصر برمی‌گردونیم میشه اونا رو داخل فرگمنت گذاشت. + 3. **Portalها** فرزند‌ها رو داخل یه زیرشاخه DOM‌ متفاوت رندر میکنه. + 4. **رشته‌ها و اعداد**: رشته‌ها و اعداد رو به عنوان گره متنی توی DOM رندر میکنه. + 5. **‌Boolean یا null**: چیزی رندر نمیکنه اما از این type برای رندر کردن محتوای شرطی استفاده میشه. **[فهرست](#فهرست)** @@ -6039,8 +6022,10 @@ puppeteer: 1. برای مقدار دهی اولیه local state با تخصیص ابجکت به this.state 2. برای اتصال متدهای event handler به نمونه - به عنوان مثال کد زیر هر دو مورد بالا رو پوشش میده: - + + به عنوان مثال کد زیر هر دو مورد بالا رو پوشش میده: + + ```javascript constructor(props) { @@ -6057,13 +6042,13 @@ puppeteer: 241. ### آیا تعریف متد سازنده توی ری‌اکت الزامیه؟ - نه، اجباری نیست. به عنوان مثال، اگه ما state رو مقدار دهی اولیه نکنیم و متد‌ها رو متصل نکنیم، نیازی به پیاده سازی constructor برای کاموننتمون نداریم. + نه، اجباری نیست. به عنوان مثال، اگه ما state رو مقدار دهی اولیه نکنیم و متد‌ها رو متصل نکنیم، نیازی به پیاده سازی constructor برای کلاس کاموننت‌مون نداریم. **[فهرست](#فهرست)** 242. ### Default propها چی هستن؟ - defaultProp ‌ها به عنوان یه ویژگی روی کلاس کامپوننت تعریف شده تا prop‌های پیش فرض رو برای کلاس تنظیم کنه. این مورد برای prop‌های undefined استفاده میشه نه برای prop‌های null. به عنوان مثال بیاین یه prop پیش فرض رنگ برای کامپوننت button بسازیم. + defaultProp ‌ها به عنوان یه ویژگی روی کلاس کامپوننت تعریف شده تاprop‌های پیش فرض رو برای کلاس تنظیم کنه. این مورد برای prop‌های undefined استفاده میشه نه برای prop‌های null. به عنوان مثال بیاین یه prop پیش فرض رنگ برای کامپوننت button بسازیم. @@ -6090,19 +6075,20 @@ puppeteer: ``` + **نکته:** اگه مقدار null رو ارائه بدیم مقدار null باقی می مونه. **[فهرست](#فهرست)** 243. ### چرا نباید تابع setState رو توی متد componentWillUnmount فراخوانی کرد؟ - setState() رو نباید توی componentWillUnmount() فراخوانی کنیم چون وقتی یه کامپوننت unmount میشه، دیگه هیچوقت دوباره mount نمیشه. + setState رو نباید توی componentWillUnmount فراخوانی کنیم چون وقتی یه کامپوننت unmount میشه، دیگه هیچوقت دوباره mount نمیشه. **[فهرست](#فهرست)** 244. ### کاربرد متد getDerivedStateFromError چیه؟ - 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, + این متد زمانی فراخوانی میشه که یه خطا توی کامپوننت‌های فرزندان این کامپوننت رخ بده. این متد errorای که رخ داده رو به عنوان ورودی دریافت می‌کنه و باید یه مقداری رو برای به روز کردن state برگردونه. ساختار کلی این متد به شکل پایینه: @@ -6111,7 +6097,8 @@ puppeteer: ``` - Let us take error boundary use case with the above lifecycle method for demonistration purpose, + + بیایین یه مثال از ErrorBoundaryها با استفاده از این متد ببینیم: @@ -6144,13 +6131,13 @@ puppeteer: 245. ### کدوم متدها و به چه ترتیبی در طول ری‌رندر فراخوانی میشن؟ - تغییر در prop‌ها یا state می‌تونه باعث به روزرسانی بشه. متد‌های زیر به ترتیب زیر وقتی یه کامپوننت مجددا رندر میشه صدا زده میشه. + تغییر در prop‌ها یا state می‌تونه باعث به روزرسانی بشه. متد‌های زیر به ترتیب، وقتی یه کامپوننت مجددا رندر میشه صدا زده میشه. - 1. static getDerivedStateFromProps() - 2. shouldComponentUpdate() - 3. render() - 4. getSnapshotBeforeUpdate() - 5. componentDidUpdate() + 1. static getDerivedStateFromProps + 2. shouldComponentUpdate + 3. render + 4. getSnapshotBeforeUpdate + 5. componentDidUpdate **[فهرست](#فهرست)** @@ -6158,14 +6145,14 @@ puppeteer: وقتی یه خطایی موقع رندر کردن وجود داشته باشه، توی متد lifecycle، یا توی constructor هر کامپوننت فرزند، متدهای زیر فراخوانی میشه. - 1. static getDerivedStateFromError() - 2. componentDidCatch() + 1. static getDerivedStateFromError + 2. componentDidCatch **[فهرست](#فهرست)** 247. ### کارکرد ویژگی displayName چیه؟ - به عنوان مثال، برای سهولت توی اشکال زدایی یه displayName انتخاب می‌کنیم که نشون میده این نتیجه یه withSubscription HOC هستش. + بیشتر برای نمایش اینکه کدوم کامپوننت رندر شده و یا debug(اشکال زدایی) راحت‌تر توی devTools استفاده میشه، به عنوان مثال، برای سهولت توی debug یه displayName انتخاب می‌کنیم که نشون میده این کامپوننت، نتیجه یه withSubscription HOC هستش. @@ -6174,11 +6161,14 @@ puppeteer: class WithSubscription extends React.Component { /*... */ } + WithSubscription.displayName = `WithSubscription(${getDisplayName( WrappedComponent )})`; + return WithSubscription; } + function getDisplayName(WrappedComponent) { return ( WrappedComponent.displayName || WrappedComponent.name || "Component" @@ -6190,16 +6180,16 @@ puppeteer: **[فهرست](#فهرست)** -248. ### ساپورت مرورگرها برای برنامه ری‌اکتی چطوریه؟ +248. ### پشتیبانی مرورگرها برای برنامه ری‌اکتی چطوریه؟ - ری اکت همه مرورگر‌های معروف از جمله اینترنت اکسپلورر ۹ به بالا رو پشتیبانی می کنه، اگرچه برای مرورگرهای قدیمی تر مثل IE 9 و IE 10 یه سری polyfill‌ها نیازه. اگه از polyfill **es5-shim و es5-sham** استفاده کنیم در اون صورت حتی مرورگر‌های قدیمی رو هم پشتیبانی میکنه که متد‌های ES5‌ رو پشتیبانی نمیکنه + ری اکت همه مرورگر‌های معروف از جمله اینترنت اکسپلورر ۹ به بالا رو پشتیبانی می کنه، اگرچه برای مرورگرهای قدیمی تر مثل IE 9 و IE 10 یه سری polyfill‌ها نیازه. اگه از polyfill **es5-shim و es5-sham** استفاده کنیم در اون صورت حتی مرورگر‌های قدیمی رو هم پشتیبانی میکنه که متد‌های ES5‌ رو پشتیبانی نمی‌کنن. **[فهرست](#فهرست)** 249. ### هدف از متد unmountComponentAtNode چیه؟ - این متد از بسته react-dom در دسترس هستش و کامپوننت mount شده رو از DOM حذف میکنه و event handler‌ها و state‌های اون کامپوننت رو فیلتر میکنه. اگه هیچ کامپوننت mount شده ای توی container وجود نداشته باشه، فراخوانی این تابع هیچ کاری رو انجام نمیده. اگه کامپوننت unmount شده ای وجود داشت true رو بر می گردونه و اگه هیچ کامپوننتی برای unmount شدن وجود نداشت false رو برمی گردونه. - امضای متد به صورت زیر هستش، + این متد از بسته react-dom در دسترس هستش و کامپوننت mount شده رو از DOM حذف میکنه و event handler‌ها و state‌های اون کامپوننت رو فیلتر می‌کنه. اگه هیچ کامپوننت mount شده‌ای توی container وجود نداشته باشه، فراخوانی این تابع هیچ کاری رو انجام نمیده. اگه کامپوننت unmount شده‌ای وجود داشت true رو بر می گردونه و اگه هیچ کامپوننتی برای unmount شدن وجود نداشت false رو برمی گردونه. + ساختار این متد به صورت زیر هستش: @@ -6213,8 +6203,8 @@ puppeteer: 250. ### code-splitting چیه؟ - code-splitting ویژگی پشتیبانی شده توسط باندلر‌هایی مثل webpack و browserify هستش که می‌تونه بسته‌های مختلفی ایجاد کنه که می‌تونه به صورت پویا در زمان اجرابارگیری بشه.ری‌اکت code-splitting‌ رو از طریق ویژگی dynamic import() پشتیبانی میکنه. - برای مثال، در قطعه کد زیر، moduleA.js و تمام وابستگی‌های منحصر به فرد اون رو به عنوان یه قطعه جداگانه ایجاد میکنه که فقط بعد از کلیک کاربر روی دکمه 'Load' بارگیری میشه. + code-splitting ویژگی پشتیبانی شده توسط باندلر‌هایی مثل webpack و browserify هستش که می‌تونه بسته‌های مختلفی ایجاد کنه که می‌تونه به صورت پویا در زمان اجرا بارگیری بشه. ری‌اکت code-splitting‌ رو از طریق ویژگی dynamic import پشتیبانی میکنه. + برای مثال، در قطعه کد زیر، moduleA.js و تمام وابستگی‌های منحصر به فرد اون رو به عنوان یه قطعه جداگانه ایجاد میکنه که فقط بعد از کلیک کاربر روی دکمه Load بارگیری میشه. **moduleA.js** @@ -6227,6 +6217,7 @@ puppeteer: ``` + **App.js** @@ -6263,7 +6254,7 @@ puppeteer: 251. ### مزایای حالت strict چیه؟ - توی موارد زیر به کار میاد + `` توی موارد زیر به کار میاد: 1. شناسایی کامپوننت‌ها با متد **unsafe lifecycle**. 2. هشدار در مورد استفاده از API مربوط به **legacy string ref**. @@ -6275,7 +6266,7 @@ puppeteer: 252. ### Fragmentهای دارای key هستن؟ - Fragment ها‌ی اعلام شده با سینتکس ممکنه key‌هایی داشته باشن. استفاده عمومی مپ کردن یه مجموعه به آرایه‌ای از fragment‌ها به صورت زیر هستش، + Fragmentها‌ی اعلام شده با سینتکس ممکنه key‌هایی داشته باشن. استفاده عمومی مپ کردن یه مجموعه به آرایه‌ای از fragment‌ها به صورت زیر هستش: @@ -6296,7 +6287,8 @@ puppeteer: ``` - **یادداشت** key تنها اتریبیوتی هستش که میشه به Fragment انتقال داد. در آینده، ممکنه از اتریبیوت‌های اضافه ای هم مثل event handler‌ها پشتیبانی بشه. + + **یادداشت** key تنها اتریبیوتی هستش که میشه به Fragment پاس داد. در آینده، ممکنه از اتریبیوت‌های اضافه ای هم مثل event handler‌ها پشتیبانی بشه. **[فهرست](#فهرست)** @@ -6313,18 +6305,18 @@ puppeteer: ``` + این prop‌ها به استثنای موارد خاص، مشابه ویژگی‌های متناظر HTML کار می‌کنن. همچنین از تمام ویژگی‌های svg وشتیبانی می کنه. **[فهرست](#فهرست)** 254. ### محدودیت‌های HOCها چی هستن؟ - کامپوننت‌های با اولویت بالا جدا از مزایایی که داره، چند تا نکته مهم هم داره. اینجا چند مورد به ترتیب گفته شده + کامپوننت‌های با اولویت بالا جدا از مزایایی که داره، چند تا نکته مهم هم داره. اینجا چند مورد به ترتیب گفته شده: - 1. **از HOC‌ها توی متد render استفاده نکنیم:** - استفاده از HOC توی یه کامپوننت با متد رندر اون کامپوننت توصیه نمیشه. + 1. **از HOC‌ها توی متد render استفاده نکنیم:** استفاده از HOC توی یه کامپوننت با متد رندر اون کامپوننت توصیه نمیشه. - + ```jsx render() { @@ -6337,12 +6329,12 @@ puppeteer: ``` - کد بالا با remount کردن کامپوننتی که باعث از بین رفتن state اون کامپوننت و همه فرزندانش شده، روی عملکرد تاثیر میذاره. در عوض، HOC‌ها رو بیرون از تعریف کامپوننت اعمال می‌کنیم تا کامپوننت بدست اومده فقط یه بار ساخته بشه. - 2. **متد‌های static باید کپی بشن** - وقتی HOC رو روی یه کامپوننت اعمال می کنیم، کامپوننت جدید هیچ کدوم از متد‌های استاتیک کامپوننت اصلی رو نداره - - + کد بالا با remount کردن کامپوننتی که باعث از بین رفتن state اون کامپوننت و همه فرزندانش شده، روی عملکرد تاثیر میذاره. در عوض، HOC‌ها رو بیرون از تعریف کامپوننت اعمال می‌کنیم تا کامپوننت بدست اومده فقط یه بار ساخته بشه. + + 2. **متد‌های static باید کپی بشن** وقتی HOC رو روی یه کامپوننت اعمال می کنیم، کامپوننت جدید هیچ کدوم از متد‌های استاتیک کامپوننت اصلی رو نداره + + ```javascript // Define a static method @@ -6357,7 +6349,9 @@ puppeteer: ``` -میتونیم با کپی کردن متدها توی container قبل از return کردنش رو این مشکل غلبه کنیم. + + می‌تونیم با کپی کردن متدها توی container قبل از return کردنش رو این مشکل غلبه کنیم. + ```javascript @@ -6373,14 +6367,13 @@ puppeteer: - 3. **Ref‌ها رو نمیشه انتقال داد:** - برای HOC‌ها نیاز داریم که همه prop‌ها رو به کامپوننت پاس بدیم اما در مورد ref‌ها این کار جواب نمیده. دلیلش هم اینه که ref در واقع یه prop شبیه key نیست. تو این مورد باید از React.forwardRef API استفاده کنیم. + 3. **Ref‌ها رو نمیشه انتقال داد:** برای HOC‌ها نیاز داریم که همه prop‌ها رو به کامپوننت پاس بدیم اما در مورد ref‌ها این کار جواب نمیده. دلیلش هم اینه که ref در واقع یه prop شبیه key نیست. تو این مورد باید از React.forwardRef API استفاده کنیم. **[فهرست](#فهرست)** 255. ### چطوری میشه forwardRefs رو توی DevTools دیباگ کرد؟ - **ًReact.forwardRef** یه تابع رندر رو به عنوان یه پارامتر میگیره و DevTools از این تابع برای تعیین اینکه چه چیزی باید برای ref forwarding component نمایش داده بشه، استفاده میکنه. برای مثال، اگه ما هیچ اسمی برای تابع رندر نذاریم یا از ویژگی diplayName استفاده نکنیم، توی DevTools‌ به عنوان ”ForwardRef” نمایش داده میشه. + **ًReact.forwardRef** یه تابع رندر رو به عنوان یه پارامتر میگیره و DevTools از این تابع برای تعیین اینکه چه چیزی باید برای ref forwarding component نمایش داده بشه، استفاده میکنه. برای مثال، اگه ما هیچ اسمی برای تابع رندر نذاریم یا از ویژگی diplayName استفاده نکنیم، توی DevTools‌ به عنوان ForwardRef نمایش داده میشه. @@ -6391,7 +6384,8 @@ puppeteer: ``` - اما اگه برای تابع رندر اسم گذاشته باشیم اونوقت به صورت **”ForwardRef(myFunction)”** نمایش داده میشه + + اما اگه برای تابع رندر اسم گذاشته باشیم اونوقت به صورت **”ForwardRef(myFunction)”** نمایش داده میشه @@ -6402,7 +6396,8 @@ puppeteer: ``` - به عنوان یه گزینه دیگه، میتونیم از ویژگی displayName برای تابع forwardRef استفاده کنیم. + + به عنوان یه گزینه دیگه، می‌تونیم از ویژگی displayName برای تابع forwardRef استفاده کنیم. @@ -6431,7 +6426,7 @@ puppeteer: 256. ### مقدار یه props کامپوننت کی true میشه؟ - اگه هیچ مقداری رو برای prop انتقال ندیم، به طور پیش‌فرض true در نظر گرفته میشه. این رفتار در دسترس هستش طوری که با رفتار HTML هم مطابقت داره. به طور مثال، عبارت‌های زیر معادل هم هستن. + اگه یه prop رو به یه کامپوننت پاس بدیم ولی هیچ مقداری رو برای اون prop نعیین نکنیم، به طور پیش‌فرض true در نظر گرفته میشه. به طور مثال: @@ -6442,7 +6437,6 @@ puppeteer: ``` - **یادداشت:** این مورد توصیه نمیشه چون ممکنه با مختصر نویسی ES6 اشتباه گرفته بشه (مثال، {name} مخفف {name: name}) **[فهرست](#فهرست)** @@ -6450,18 +6444,19 @@ puppeteer: Next.js یه فریمورک محبوب و سبک برای برنامه‌های استاتیک و تحت سرور هستش که توسط ری‌اکت ساخته شده. همچنین استایل دهی و مسیریابی رو هم ارائه میده. اینجا ویژگی‌های اصلی ارائه شده توسط Next.js آورده شده. - 1. server rendering به طور پیش فرض ارائه شده + 1. server rendering به طور پیش فرض پشتیبانی میشه 2. تقسیم خودکار کد برای بارگذاری سریعتر صفحه - 3. مسیریابی ساده سمت مشتری (مبتنی بر صفحه) - 4. محیط توسعه یافته مبتنی بر بسته وب (HMR) - 5. با Express یا هر سرور HTTP دیگه‌ای Node.js قابل پیاده سازیه - 6. با تنظیمات Babel و Webpack خودمون قابل تنظیمه + 3. مسیریابی(routing) ساده سمت کلاینت(مبتنی بر صفحه) + 4. محیط توسعه زنده و سریع(HMR) + 5. با Express یا هر سرور HTTP دیگه‌ای روی nodejs قابل پیاده سازیه + 6. با تنظیمات Babel و Webpack قابل تنظیمه **[فهرست](#فهرست)** -258. ### چط،وی کی‌تونیم یه تابع event handler رو به یه کامپوننت پاس بدیم؟ +258. ### چطوری می‌تونیم یه تابع event handler رو به یه کامپوننت پاس بدیم؟ -event handler‌ها و توابع دیگه رو میتونیم به عنوان prop به کامپوننت‌های فرزند انتقال بدیم. به صورت زیر توی کامپوننت فرزند می‌تونه استفاده بشه، + event handler‌ها و توابع دیگه رو میتونیم به عنوان prop به کامپوننت‌های فرزند انتقال بدیم. به صورت زیر توی کامپوننت فرزند می‌تونه استفاده بشه، + ``` @@ -6474,7 +6469,7 @@ event handler‌ها و توابع دیگه رو میتونیم به عنوان 259. ### استفاده از توابع arrow برای متدهای render خوبه؟ - بله، می‌تونیم استفاده کنیم. این معمولا ساده ترین راه برای انتقال پارامترها به توابع برگشتی هستش. اما در حین استفاده باید عملکرد را بهینه کنیم. + بله، می‌تونیم استفاده کنیم. این معمولا ساده‌ترین راه برای انتقال پارامترها به توابع برگشتی هستش. اما موقع استفاده ازشون اگه خیلی پرفورمنس برامون مهمه یادداشت پایین رو باید مدنظر داشته باشیم. @@ -6490,17 +6485,18 @@ event handler‌ها و توابع دیگه رو میتونیم به عنوان ``` - **یادداشت:** استفاده از تابع arrow توی متد رندر یه تابع جدید ایجاد میکنه که هر بار که کامپوننت رندر میشه، ممکنه مفاهیم عملکردی داشته باشه. + + **یادداشت:** استفاده از تابع arrow توی متد رندر، با هر بار اجرا، یه تابع جدید ایجاد میکنه که هر بار که کامپوننت رندر میشه، مجدد ایجاد شده و توی حافظه مصرفی و... تاثیر میزاره. **[فهرست](#فهرست)** 260. ### چطوری از اجرای چندباره یه تابع جلوگیری کنیم؟ - 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, + اگه از eventHandlerها مثل **onClick یا onScroll** استفاده می‌کنین و می‌خوایید از اجرا شدن بیش از حد تابع callback جلوگیری کنین، روش‌های مختلفی برای انجام این کار وجود داره: 1. **Throttling:** Changes based on a time based frequency. For example, it can be used using \_.throttle lodash function 2. **Debouncing:** Publish changes after a period of inactivity. For example, it can be used using \_.debounce lodash function - 3. **RequestAnimationFrame throttling:** Changes based on requestAnimationFrame. For example, it can be used using raf-schd lodash function + 3. **Throttling با RequestAnimationFrame :** Changes based on requestAnimationFrame. For example, it can be used using raf-schd lodash function **[فهرست](#فهرست)** @@ -7068,7 +7064,9 @@ event handler‌ها و توابع دیگه رو میتونیم به عنوان ``` + Let's use this HOC to log all props that get passed to our “fancy button” component, + ```javascript @@ -7083,6 +7081,7 @@ event handler‌ها و توابع دیگه رو میتونیم به عنوان ``` + حالا بیاین یه ref بسازیم و اونو به کامپوننت FancyButton بفرستیم. توی این مورد می‌تونیم focus رو روی عنصر دکمه تنظیم کنیم. @@ -7137,6 +7136,7 @@ event handler‌ها و توابع دیگه رو میتونیم به عنوان ``` + **یادداشت:** اگه از createReactClass استفاده می‌کنیم اتصال خودکار برای همه روش‌ها در دسترسه. یعنی نیازی به استفاده از.bind(this) توی constructor برای event handler‌ها نیست. **[فهرست](#فهرست)** @@ -7161,6 +7161,7 @@ event handler‌ها و توابع دیگه رو میتونیم به عنوان ``` + میتونیم همین کد رو بدون JSX مثل زیر بنویسیم، @@ -7189,6 +7190,7 @@ event handler‌ها و توابع دیگه رو میتونیم به عنوان 1. دو عنصر از انواع مختلف باعث تولید درخت‌های مختلفی میشه. 2. برنامه نویس می‌تونه اشاره کنه که کدوم یکی از عناصر فرزند ممکنه توی رندر‌های مختلف با یه prop اصلی پایدار باشن. + **[فهرست](#فهرست)** 288. ### قوانینی که توسط الگوریتم‌های diffing پوشش داده می‌شوند کدام هستن؟ @@ -7209,6 +7211,7 @@ event handler‌ها و توابع دیگه رو میتونیم به عنوان ``` + 3. **عناصر کامپوننت از همان نوع:** وقتی کامپوننت به‌روز میشه، نمونه ثابت میمونه، بنابراین state‌ بین رندر‌ها حفط میشه. ری‌اکت برای مطابقت با عنصر جدید prop‌های نمونه کامپوننت اساسی رو به‌روز میکنه و متد‌های componentWillReceiveProps() و componentWillUpdate() رو روی نمونه اصلی صدا میزنه. بعد از اون متد render() صدا زده میشه و الگوریتم diff، نتیجه قبلی و نتیجه جدید رو جستجو میکنه. 4. **Recursing On Children:** @@ -7230,6 +7233,7 @@ event handler‌ها و توابع دیگه رو میتونیم به عنوان ``` + 5. **هندل کردن کلید‌ها** ری‌اکت از ویژگی key پشتیبانی میکنه. وقتی فرزندان key داشته باشن، ری‌اکت از key‌ برای مطابقت دادن فرزندان در درخت اصلی با فرزندان در درخت بعدی استفاده میکنه. برای مثال، اضافه کردن یه key می‌تونه تبدیل درخت رو کارآمد کنه، @@ -7280,7 +7284,9 @@ event handler‌ها و توابع دیگه رو میتونیم به عنوان ``` + در واقع نیازی نیست که از prop فرزند توی لیست "attribute"‌ها توی عنصر JSX نام برده بشه. در عوض میتونیم اونو مستقیما توی المنت نگه داریم. + ```jsx @@ -7335,6 +7341,7 @@ event handler‌ها و توابع دیگه رو میتونیم به عنوان ``` + این روش رندر کردن prop ها، انعطاف پذیری استفاده از هر دو الگو رو میده. **[فهرست](#فهرست)** @@ -7619,11 +7626,11 @@ event handler‌ها و توابع دیگه رو میتونیم به عنوان این پایین به یه سری از ویژگی‌های create-react-app رو لیست می‌کنیم. - 1. ساپورت کامل از React، JSX، ES6، Typescript و Flow + 1. پشتیبانی کامل از React، JSX، ES6، Typescript و Flow 2. Autoprefixed CSS 3. CSS Reset/Normalize 4. سرور live development - 5. یه اجرا کننده unit-test که ساپورت built-in برای گزارش coverage داره + 5. یه اجرا کننده unit-test که پشتیبانی built-in برای گزارش coverage داره 6. یه اسکریپت build برای bundle کردن فایل‌های JS، CSS و تصاویر که برای استفاده production با قابلیت hash و sourcemap عمل می‌کنه 7. یه سرویس ورکر برای استفاده به صورت offline-first که قابلیت استفاده به صورت web-app و pwa رو فراهم می‌کنه