نکاتی برای ساخت کامپوننت ری اکت با قابلیت استفاده مجدد — راهنمای کاربردی

۱۷۵ بازدید
آخرین به‌روزرسانی: ۱۵ مهر ۱۴۰۲
زمان مطالعه: ۵ دقیقه
نکاتی برای ساخت کامپوننت ری اکت با قابلیت استفاده مجدد — راهنمای کاربردی

در این مقاله به بررسی و معرفی 9 نکته می‌پردازیم که برای ساخت کامپوننت ری اکت با قابلیت استفاده مجدد و اشتراک ضروری هستند. این نکات در سه دسته کلی مرتبط با زبان تایپ اسکریپت، موارد مربوط به سازماندهی کد و API-ها ارائه شده‌اند.

از تایپ اسکریپت استفاده کنید

کامپوننت‌های با قابلیت استفاده مجدد، به قابلیت «بررسی نوع» (Type-Checking) نیاز دارند. «بررسی نوع» برای خلق تجربه توسعه مثبت و امکان همکاری تیمی بهینه روی کد ضروری است. بدین ترتیب کد برای افراد دیگر خوانایی بیشتر می‌یابد و خودتان نیز در صورت مراجعه مجدد در آینده به کدتان، آن را سریع‌تر و بهتر درک می‌کنید.

1. استفاده از تایپ اسکریپت و عدم استفاده از انواع prop

تایپ اسکریپت و انواع Prop در حال حاضر دو روش محبوب برای بررسی نوع در کد ری‌اکت محسوب می‌شوند. تایپ اسکریپت انواع را در زمان کامپایل بررسی می‌کند؛ در حالی که انواع prop این کار را در زمان اجرا انجام می‌دهد.

از آنجا که این دو روش کارکرد متفاوتی دارند و برای مقاصد مختلفی استفاده می‌شوند، ممکن است حالتی پیش بیاید که با همدیگر در رقابت نباشند. این وضعیت در تئوری مصداق دارد، اما در دنیای واقعی تایپ اسکریپت و انواع Prop همپوشانی زیادی در شیوه استفاده دارند. به همین جهت است که به ندرت می‌بینیم از هر دوی آن‌ها در یک پروژه استفاده شده باشد. نوشتن کد ساده و قابل درک برای عموم عالی است، اما در عمل ارائه یک محصول خوب و ارائه سریع آن، اولویت بالاتری دارد.

از آنجا که تایپ اسکریپت امکاناتی بسیار بیشتر از یک بررسی نوع ساده ارائه می‌کند و همچنین به صورت فزاینده‌ای به استانداردی برای توسعه وب تبدیل می‌شود، ‌به نظر می‌رسد که بهترین گزینه برای توسعه ری‌اکت به خصوص برای کامپوننت‌های با قابلیت استفاده مجدد محسوب می‌شود.

در زمان اشتراک کامپوننت‌های با قابلیت استفاده مجدد با استفاده از ابزارهایی مانند Bit (+)، کامپوننت‌ها را می‌توان به هر ریپازیتوری یا کدبیس به صورت سورس کد ایمپورت و اکسپورت کرد. بدین ترتیب همه مزیت‌های عالی تایپ اسکریپت در اختیار مصرف‌کنندگان و/یا نگهداری‌کنندگان این کامپوننت‌ها قرار می‌گیرد.

ساخت کامپوننت ری اکت با قابلیت استفاده مجدد

یکی دیگر از مزیت‌های استفاده از تایپ اسکریپت این است که می‌توانید از امکان ساخت خودکار مستندات با استفاده از react-docgen یا bit.dev بهره‌مند شوید که البته این امکان در زمان استفاده از prop-types نیز وجود دارد. به مثال زیر توجه کنید:

1type RemovableListItemProps = {
2    /** The item's text */
3    text: string,
4    id: string,
5    /** A callback function for the "X" click event */
6    removeItem: (id: string) => void
7}
8
9
10const RemovableListItem : React.FC<RemovableListItemProps> = ({text, id, removeItem} : RemovableListItemProps) => {
11    const [isCompleted, setIsCompleted] = useState(false);
12    return(
13        <li className={styles.listItem}>
14            <span data-iscompleted={isCompleted} className={styles.text}  onClick={() => setIsCompleted(!isCompleted)}>{text}</span>
15            <button className={styles.delete} onClick={() => removeItem(id)}>X</button>
16        </li>
17    )
18}
19
20export default RemovableListItem;

کد فوق یک صفحه کامپوننت به صورت زیر تولید می‌کند:

کامپوننت ری اکت با قابلیت استفاده مجدد

2. کامپوننت (و نه صرفاً Prop و رویداد) را تعریف کنید

کامپوننت معرفی شده در مثال قبل به صورت یک کامپوننت تابعی نوع‌بندی شده است. این کار به این منظور انجام یافته است تا تایپ اسکریپت از prop صریح و انواع بازگشتی دقیق کامپوننت تابعی ری‌اکت آگاه باشد.

به مثال ساده زیر توجه کنید. زمانی که می‌خواهیم یک کامپوننت دکمه را برچسب‌گذاری کنیم، به صورت زیر عمل می‌کنیم:

1import React from 'react';
2import './Button.css';
3
4interface IButtonProps {
5	color: 'day' | 'night';
6}
7
8const Button = ({color} : IButtonProps) => {
9  return (
10      <button className={color}></button>
11  )
12}
13
14export default Button;
1function App() {
2return (
3<div className="App">
4        <Button color='day'>a lable!</ButtonA>
5    </div>
6  );
7}

اما این خطا ظاهر می‌شود:

Type '{ children: string; color: "day"; }' is not assignable to type 'IntrinsicAttributes & IButtonProps'.

Property 'children' does not exist on type 'IntrinsicAttributes & IButtonProps'.

3. کد TS را طوری بنویسید که امکان مستندسازی خودکار باشد

زمانی که از react-docgen یا bit.dev برای تولید خودکار مستندات برای کامپوننت‌های با قابیلت استفاده مجدد استفاده می‌کنید، نوع/اینترفیس props باید هم به صورت ژنریک از <React.FC<T تعریف شود و هم مستقیماً به صورت نوع آرگومان‌های تابع تعریف شده باشد. در غیر این صورت prop-های شما در مستندات تولید شده ظاهر نمی‌شود:

1const ExtendedButton : React.FC<IButtonProps> = ({text, type, action} : IButtonProps) => {
2
3}

4. ارث‌بری انواع Prop برای کامپوننت‌های شبیه به HTML نیتیو

یک روش بهتر برای تعریف کامپوننت‌های ری‌اکت که رفتاری مانند عنصر نیتیو HTML دارند، این است که نوع آن را با یکی از انواع عناصر HTML در ری‌اکت بسط دهید:

1import React, {ButtonHTMLAttributes} from 'react';
2
3interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
4    /** The text inside the button */
5    text: string,
6    /** The type of button, pulled from the Enum ButtonTypes */
7    type: ButtonTypes,
8    /** The function to execute once the button is clicked */
9    action: () => void
10}
11
12const ExtendedButton : React.FC<IButtonProps> = ({text, type, action}) => {
13
14}

راهنمایی‌های در خصوص سازماندهی

در این بخش برخی نکات را در خصوص سازماندهی کد کامپوننت‌های ری‌اکت ارائه می‌کنیم.

5. یک دایرکتوری برای هر کامپوننت

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

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

قرار دادن فایل‌های مرتبط با کامپوننت بر اساس انواعِ آن‌ها زیر دایرکتور‌‌ی‌های مختلف، کار خوبی محسوب نمی‌شود و کار کردن به این روش اصلاً واضح نیست.

ساخت کامپوننت ری اکت با قابلیت استفاده مجدد

6. از اسامی مستعار استفاده کنید

به کامپوننت‌های دیگر با استفاده از «اسامی مستعار» (Aliases) ارجاع بدهید. بدین ترتیب از جابجایی تصادفی فایل‌ها جلوگیری می‌شود، ‌زیرا این ارجاع‌ها باید معتبر باقی بمانند. استفاده از مسیرهای نسبی رو به عقب موجب ایجاد یک ساختار فایل خاص برای کامپوننت می‌شود و فردی که از پروژه استفاده می‌کند هم ملزم خواهد بود که از این ساختار پروژه تبعیت کند. Webpack, Rollup و Typescript روش‌هایی برای استفاده از ارجاع‌های ثابت به جای انواع نسبی ارائه می‌کنند. تایپ اسکریپت از paths برای ایجاد نگاشت جهت ارجاع به کامپوننت‌ها استفاده می‌کند. Rollup از rollup/plugin-alias@ برای ایجاد اسامی مستعار مشابه استفاده می‌کند و Webpack از تنظیمات به همین منظور کمک می‌گیرد.

import { } from '@utils'

API-ها

قاعده کلی این است که سطح API کامپوننت را در حد کمترین مقدار ضروری حفظ کنیم. در این مورد باید همواره سهولت استفاده را در نظر داشته باشید، چون ‌کامپوننت‌های با قابلیت استفاده مجدد نباید یادگیری دشواری داشته باشند.

7. از Enum-ها به جای مقادیر چندگانه بولی استفاده کنید

یک توصیه کلی این است که به جای مقادیر بولی چندگانه از «انواع شمارشی» (Enums) استفاده کنید. استقلال بین پارامترها موجب دشواری استفاده از کامپوننت شما می‌شود. برای نمونه پیشنهاد می‌شود به صورت زیر عمل کنید:

1enum Location {
2  TopLeft,
3  TopRight,
4  BottomLeft,
5  BottomRight
6 }
7interface IProps {
8  location: Location
9}

و از به‌کارگیری روش زیر اجتناب کنید:

1type Location = {  
2  isLeft: boolean,
3  isTop: boolean
4}
5interface IProps {
6  location: Location
7}

8. مقادیر پیش‌فرض تعیین کنید

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

9. استایل‌بندی با تم‌ها را محدود کنید

برای ارائه قابلیت پیش‌بینی‌پذیری بهتر برای رفتار کامپوننت بهتر است میزان آزادی مصرف‌کنندگان کامپوننت برای override کردن مشخصه‌های استایل‌بندی کامپوننت را محدود کنید.

1class ThemeProvider extends React.Component {
2  render() {
3    return (
4      
5        {this.props.children}
6      
7    );
8  }
9}
10
11const theme = {
12  colors: {
13    primary: "purple",
14    secondary: "blue",
15    background: "light-grey",
16  }
17};

به این ترتیب به پایان این راهنما می‌رسیم.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۲ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
bitsrc
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *