تسلط بر اجزای ترکیبی: ساخت اجزای واکنش انعطاف پذیر و قابل استفاده مجدد

Summarize this content to 400 words in Persian Lang

یکی از مفیدترین و پرکاربردترین مفاهیم در دنیای React، الگوهای طراحی است، زیرا به مقیاس پذیر نگه داشتن کد کمک می کند و به اجزایی که ایجاد می کنیم معنای بیشتری می بخشد.

الگوهای مختلفی وجود دارد و در این مقاله به آن خواهیم پرداخت اجزای مرکب، یک الگوی پیشرفته که به ویژه برای ایجاد رابط های انعطاف پذیر و قابل ترکیب مفید است.

Compound Components یک الگوی پیشرفته در React است. هدف آن ایجاد طراحی انعطاف‌پذیرتر با امکان اشتراک‌گذاری حالت و منطق در میان گروهی از مؤلفه‌ها است. به این ترتیب، ارتباط بین مؤلفه والد و مؤلفه فرزند را می توان به شیوه ای انعطاف پذیر به دست آورد.

اجزاء با هم کار می کنند تا به رفتارهای خاصی دست یابند، بدون ایجاد درختان سرپایی پیچیده یا منطق بیش از حد پیچیده که در آینده بازسازی یا درک آن دشوار خواهد بود.

این الگو به حذف حفاری پایه کمک می کند، جایی که ما تعداد زیادی پایه را از چندین لایه جزء عبور می دهیم. حفاری پایه می تواند مشکل ساز باشد، زیرا ممکن است هر بار که وضعیت به روز می شود، رندرهای غیرضروری ایجاد کند، زیرا هر تغییر حالت، تمام اجزای فرزند را به روز می کند.

نمونه ای از Compound Components را می توان در ساختار HTML مشاهده کرد select و option برچسب ها:

عنصر Select به عنوان مدیر حالت رابط کار می کند، در حالی که عناصر گزینه نحوه عملکرد مؤلفه انتخاب را پیکربندی می کنند.

در این مثال، ما یک را ایجاد خواهیم کرد Modalکه به دو جزء ترکیبی تقسیم می شود: Toggle و Content. آنها حالت باز/بسته مودال را به اشتراک خواهند گذاشت.

بیایید قدم به قدم نحوه ایجاد این کامپوننت را توضیح دهیم:

می‌توانیم با ایجاد زمینه‌ای شروع کنیم که حالت باز/بسته مدال را مدیریت می‌کند:

ایجاد پایه مولفه Modal:

توجه داشته باشید که ما در حال استفاده هستیم children برای گرفتن اجزایی که در داخل Modal قرار می گیرند. ما می خواهیم از آن به صورت زیر استفاده کنیم:

اکنون باید کامپوننت toggle را ایجاد کنیم که مسئول باز کردن Modal است:

ما همچنین به یک جزء محتوا نیاز داریم که مسئول نمایش محتوای Modal باشد:

در نهایت، ما می‌توانیم هر دو مؤلفه را به مؤلفه Modal خود اضافه کنیم، و آن آماده است! 😊

استفاده:

نتیجه:

به این ترتیب، ما ایجاد و استفاده از مدال ها را بسیار انعطاف پذیر و قابل استفاده مجدد می کنیم. Modal.Toggle مسئول راه اندازی صفحه نمایش مدال است، در حالی که Modal.Content باید محتوای مودال را نمایش دهد.

این ساختار به توسعه دهندگان اجازه می دهد تا به راحتی رفتار و محتوای مدال ها را مطابق با نیازهای خاص برنامه های خود سفارشی کنند و کد را تمیزتر و سازماندهی کنند.

نمونه های دیگر

همچنین می توانیم از Compound Component ها در زمینه های دیگر استفاده کنیم، مانند:

اجزای آکاردئون:

اجزای منو:

همه این مثال‌ها انعطاف‌پذیر و سازگار هستند و توسعه، مقیاس‌پذیری و استفاده از اجزا را آسان‌تر می‌کنند.

ورزش کنید

ما متوجه شدیم که دکمه بستن در داخل کامپوننت محتوا قرار داده شده است، اما جالب است که کامپوننتی برای مدیریت بسته شدن مدال اختصاص داده شود. شما می توانید چیزی شبیه به آن ایجاد کنید Close. آزمایش کنید و این جزء را نیز اضافه کنید!

ما دیدیم که چگونه نوشتن اجزا با استفاده از الگوی Compound Components می تواند در برنامه های ما مفید باشد. ما همچنین نحوه پیاده‌سازی آن را بررسی کردیم و نمونه‌هایی از جایی که این الگو می‌تواند مناسب باشد را بررسی کردیم.

به راحتی می توانید با استفاده از Compound Component ها کامپوننت ها را کشف و آزمایش کنید. از آن عاقلانه استفاده کنید و ارزیابی کنید که آیا استفاده از آن در زمینه شما منطقی است یا خیر، زیرا اگر به خوبی اجرا نشود، ممکن است بیشتر به یک مانع تبدیل شود تا کمک.

توجه: من همین محتوا را در react4noobs پست کردم، یک مخزن BR که مقالات ایجاد شده توسط توسعه دهندگان در جهان React را گرد هم می آورد. ارزش بررسی را دارد!