۸ قدم برای حرفه‌ایی شدن در React (قسمت سوم)

در قسمت اول درباره ESLint, WebPack و Babel صحبت کردیم و دیدیم که با یه تغییر کوچیک داخل کانفیگ ESLint چقدر میشه تمیز و بهینه تر کد نویسی کرد.
تو قسمت دوم ویژگی‌های پلاگین transform-class-properties و تکنیک Code Splitting را مورد بررسی قرار دادیم.
و رسیدیم به قسمت هیجان انگیز Design Patterns :)
و البته بیشتر درباره Higher Order Components

شاید بارها و بارها براتون اتفاق افتاده باشه که یک کد رو بخواهید به طور منظم بین تمام کامپوننت‌ها باز نویسی کنید ؟
خب شاید تعریفش یکم گیج کننده باشه ولی تا آخر این مقاله کامل متوجه HOC و اهمیت اون داخل برنامه‌های React می‌شید.

HOC یک تکنیک هستش که شما یک Component رو به یک فانکشن پاس میدید و یک Component جدید می‌گیرید :)

قطعه کد بالا رو در نظر بگیرید. یک کامپوننت ساده که اطلاعات کاربر رو از سرور میگیره و داخل صفحه قرار میده. اگر دقت کرده باشید متد render یکم شلوغ شده و داخل WillMount داریم AJAX می‌زنیم ...

میشه اینکارو راحت‌تر کرد و کامپوننت‌های ساده‌تری داشت.
مثلا: یک کامپوننت برای دریافت اطلاعات از سرور و یک کامپوننت برای مدیریت وضعیت دریافت اطلاعات از سرور.

اصل مطلب اینکه یک متدی به نام fetchData یک رشته به عنوان url و یک کامپوننت به عنوان پارامتر دوم دریافت می‌کنه. اطلاعات رو از سرور می‌گیره و به کامپوننتی که پاس دادیم تقدیم می‌کنه

این کامپوننت یا همون HOC خودمون اطلاعات رو از HOC قبلی میگیره یکسری شرط رو بررسی می‌کنه و به به کامپوننت اصلی پاس میده.
متغیر displayName برای debuging و اینکه اگر خطایی در کامپوننت به وجود اومد متوجه بشیم در کدوم قسمت این خطا بوده.
مثلا اگر ۳،۴ بار این HOC رو در DOM به کار برده باشیم و LoadingHOC خطا بده شما داخل کنسول می‌بینید که Error نوشته شده مربوط LoadingHOC هست ولی کدوم LoadingHOC. برای کامپوننت Profile, Shop یا ‌Basket ؟
و اینجاست که displayName باعث میشه داخل Console شما بجای پیغام خطای LoadingHOC خطای LoadingHOC(نام Component Wrap شده رو دارید)

Error in LoadingHOC(Basket)

و در آخر برای استفاده از HOC کافیه که:

الان یک کامپوننت شلوغ به ۳ کامپوننت سبک و خوانا تبدیل شد که هر کدوم state خودشون رو دارن و جالبترین قسمت اینکه این کامپوننت ها reusable هستن شاید لازم باشه اطلاعات رو بجای ajax از فایل بخونید مشکلی نیست فقط کافیه props ها رو پاس بدین :) یا شاید چند جا لازم باشه اطلاعات رو از سرور دریافت کنید نیازی به باز نویسی نیست
اینجاست که react بیشتر از یک کتابخونه JS عمل می‌کنه و به شما یک طرز فکر رو القا می‌کنه، شما باید همه چیز رو از بالا و با ذهنی باز نگاه کنید. تمیز کد بزنید و کامپوننتهاتونو بدون محدودیت همه جا استفاده کنید.

انتقال اطلاعات بین کامپوننت‌ها

کامپوننت بالا رو در نظر بگیرید.
از کامپوننت پدر A به کامپوننت فرزند B یک prop به نام name پاس داده شد، و فرضاً B اون prop رو چاپ می‌کنه.

خب سادس همه خوشحالن و هیچ مشکلی نداره اما مشکل زمانی به وجود میاد که:
۱. اگر بخوایم از A به H یا G مقادیر رو ارسال کنیم چه روندی باید طی بشه

می بینید که چه‌قدر کد تکراری باید نوشته بشه و تغییر مقدار یک prop باعث میشه مجددا Component ها نیاز به re-render داشته باشن و کلی از performance از دست میره و کد اصلا خوانا نیست و علاوه بر همه اینا کامپوننت ها re-usable نیستن

۲. اگر لازم باشه از فرزند به پدر اطلاعات منتقل بشه باید کلی کثیف کاری دیگه کینم و اگر همین روند رو پیش بگیریم اسپاگتی داریم با طعم react

اینجاست که نیاز به redux, context, mobx , ... احساس شد.
این کتابخونه ها و object ها اطلاعات رو داخل یک فایل یا قسمتی از حافظه نگه‌داری می‌کنن و وقتی که اطلاعات تغییر کرد کامپوننت های متصل شده رو re-render می‌کنن، در اصل همون state رو در خارج از component نگه داری می‌کنن ...

آموزش Context API:

ادامه مطالب رو سعی می کنم تا چند روز آینده در قالب مقاله دیگه‌ایی تکمیل کنم و لینکش رو همینجا قرار بدم
تا اون موقع این چندتا لینک رو مطالعه کنید:

خوشحال میشم بدونم این مقاله مفید واقع شده یا نه! و آیا شما کاربردی بودن HOC ها رو درک کردید ؟