هنگام شروع یک پروژه جدید React ،ایده خوبی است که دستورالعمل‌هایی را برای مقیاس پذیرتر کردن کد در نظر بگیرید.
در این مقاله، تعدادی از نکاتی و تجربیاتی که طی سال‌های متوالی استفاده از ری‌اکت به دست آورده‌ام که برای شما در تعیین راهنمای پروژه بسیار کمک می‌کند، برایتان به اشتراک می‌گذارم.
نحوه سازماندهی state بین عبارات محلی و سراسری
react کتابخانه‌ای است که رابط کاربری را بر اساس وضعیت فعلی آن مدیریت می‌کند. به عنوان یک توسعه دهنده، وظیفه شما این است که مکانی را برای stateهایی که برنامه شما را تشکیل می‌دهند سازماندهی کنید. برخی از توسعه دهندگان ترجیح می‌دهند هر داده‌ای را در redux نگهداری کنند تا کلیه stateهای موجود را مدیریت کنند.
اما آیا شما فقط برای باز یا بستن یک منوی کشویی ساده نیاز به ارسال یک اکشن به مدیر state خود دارید؟ آیا سایر قسمت‌های برنامه شما نیاز به دانستن مقادیر فرم تماس دارند؟ مقادیر فرم معمولا موقتی هستند و فقط توسط کامپوننتی که فرم را رندر می‌کند استفاده می‌شوند.
به جای استفاده از Redux برای مدیریت stateهای برنامه، بهتر است برخی از آنها را به صورت محلی نگه دارید تا از آشفتگی بیش از حد برنامه خود جلوگیری کنید.
به عنوان یک قاعده کلی، می‌توانید این سوالات را بپرسید:
- آیا سایر قسمت‌های برنامه به این داده‌ها نیاز دارند؟
- آیا می‌توان داده‌های مشتق شده دیگری را بر اساس این داده‌های اصلی ایجاد کرد؟
- آیا داده‌های یکسانی برای هدایت چندین کامپوننت استفاده می‌شود؟
- آیا مقداری وجود دارد که بتوان این state را به یک زمان مشخص (یعنی دیباگینگ سفر در زمان) برگرداند؟
- آیا می‌خواهید داده‌ها را در حافظه پنهان کنید (یعنی به جای درخواست مجدد، از state موجود استفاده کنید)
- آیا می‌خواهید هنگام بارگیری مجدد کامپوننت‌های رابط کاربری (که ممکن است هنگام تعویض state داخلی خود را از دست بدهند) این داده‌ها را ثابت نگه دارید؟
کامپوننت‌هایی که از stateهای محلی استفاده می‌کنند، مستقل‌تر و قابل پیش بینی‌تر هستند.
آموختن مراحل تست و به کارگیری آن از همان ابتدای کار
نکته‌ای که در مورد نوشتن تست‌های اتوماسیون وجود دارد این است که در یک زمان خاص، امکان تست دستی بدون صرف وقت و منابع زیاد وجود ندارد.
هنگام شروع یک پروژه، توجیه صرف نظر از نوشتن تست بسیار آسان است، زیرا پایه کد شما نسبتا کوچک است. اگر فقط پنج تا ده کامپوننت در برنامه react خود داشته باشید، اتوماسیون نوشتن کاری سخت و خالی از لطف نیست. اما هنگامی که بیش از پنجاه کامپوننت و چندین ماژول داشته باشید، تست دستی پروژه ممکن است یک روز طول بکشد و حتی در این صورت اشکالاتی ایجاد می‌شود بدون اینکه کسی متوجه شود.
بله، نوشتن کد تست به شما کمک می‌کند تا کد خود را ماژولارتر کنید. همچنین به شما کمک می‌کند تا سریعتر خطاها را پیدا کرده و از پروژه در برابر شکست در تولید محافظت کنید. تست اتوماسیون در نهایت به شما کمک می‌کند تا برنامه خود را ارتقا دهید، وقتی تست دستی دیگر نمی‌تواند تأیید کند که کد مطابق انتظار کار می‌کند.
اما اگر عادت نداشته باشید، نمی‌توانید به طور ناگهانی کد تست بنویسید. به همین دلیل شما باید از ابتدا شروع کنید. اگر نمی‌دانید از کجا شروع کنید، پیشنهاد من تست ادغام است؛ زیرا مهمترین قسمت در مورد تست این است که تأیید کنید کامپوننت‌های شما به درستی با هم کار می‌کنند.
بهره گیری از ابزارهای کمک کننده در مقیاس بندی
به طور معمول نیازی نیست که در ابتدای برنامه خود ابزارهای زیادی را به پروژه اضافه کنید. اما از آنجا که ما در مورد مقیاس پذیری برنامه react در یک کد بزرگ صحبت می‌کنیم، بهتر است که از همه ابزارهای مفید و کاربردی استفاده کنید.
- Prettier و ESLint برای ایجاد الگوی کد ثابت بین اعضای تیم و کاهش خطاهای سینتکسی مورد نیاز خواهند بود. کتابخانه‌های ابزار قدرتمندی هم مانند React Router ، date-fns و React-hook-form همیشه مناسب هستند.
- افزودن TypeScript و Redux ممکن است تا زمانی که برنامه شما مستعد خطاهای تایپ باشد به تأخیر بیفتد و بخش‌هایی از برنامه بارها و بارها به همان state نیاز دارند که شما برای دسترسی به آن در سطح گلوبال نیاز دارید.
- پیاده سازی مدیریت state از همان ابتدا نیاز نیست؛ زیرا خود react در حال حاضر بهترین متد را برای آن به کار می‌گیرد، بدون اینکه شما را درگیر کند.
- Bit (Github) برای مدیریت و اشتراک کامپوننت‌های سازنده به عنوان بلوک‌های سازنده مستقل. این بدان معنی است که شما هر کامپوننت را جداگانه تست و رندر می‌کنید. بعدا تضمین می‌کند که زمان بهتری برای نگهداری و استفاده مجدد از آن وجود دارد.
به علاوه هنگام استفاده از Bit در پروژه خود، هر کامپوننت را به طور مستقل کنترل می‌کند (در کنار SCM پروژه)، به این معنی که یک کامپوننت به اشتراک گذاشته شده در Bit.dev می‌تواند کاملا مستقل از پروژه حفظ شود (یعنی ایمپورت کامپوننت از Bit.dev، تغییر آن و قراردادن آن به مجموعه خود). - همچنین می‌توانید برای شروع پروژه خود از Next.js به جای Create React App استفاده کنید.
این ابزارها به شما کمک می‌کنند تا یک پایگاه کد react بزرگ را حفظ کنید، اما توجه داشته باشید که هر ابزاری که اضافه کنید سطح پیچیدگی پروژه را افزایش می‌دهد. لطفاً قبل از تصمیم گیری برای استفاده از ابزار، تحقیقات خود را انجام دهید.
فایل‌های پروژه خود را به خوبی سازماندهی کنید
یکی از بهترین نکاتی که در مورد مقیاس گذاری نرم‌افزار react آموختم این است که سازماندهی فایل‌های پروژه و نام گذاری مناسب آنها می‌تواند پیشرفت شما را تسریع کند. برخی از توسعه دهندگان تمایل دارند که index.js را به عنوان فایل اصلی در دایرکتوری کامپوننت‌ها بنویسند، مانند این:
سازماندهی کامپوننت‌ها با index.js
این کار منطقی به نظر می‌رسد، زیرا وقتی کامپوننت‌ها را به فایل‌های دیگر ایمپورت می‌کنید، عبارت به صورت زیر می‌شود:
import Button from '../components/Button';اما وقتی آنها را کنار هم در ویرایشگر کد باز می‌کنید، حالت زیر را هم در نظر بگیرید:
در واقع همه این index.js ها هرکسی را گیج می‌کند. اما اگر هم فایل‌های index.js را به نام خود کامپوننت تغییر نام دهید، عبارت ایمپورت کمی زشت به نظر می‌رسد:
import Button from '../components/Button/Button';تیم ما سرانجام به این نتیجه رسید که هم فایل به نام کامپوننت نام گذاری شده باشد و هم یک فایل index.js که کامپوننت را اکسپورت می‌کند:
افزودن یک فایل کامپوننت در کنار index.js
ما همچنین فایل CSS و تست واحد را درون دایرکتوری کامپوننت قرار می‌دهیم. به این ترتیب، هر دایرکتوری کامپوننت می‌تواند یک کامپوننت مستقل باشد.
چه امتیازی برای این مقاله میدهید؟
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید