الگو‌های ری اکت - ۳

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

تو این مقاله قصد دارم الگوهای ری اکت رو با بیان ساده شرح بدم . این مقاله برداشت آزادی از سایت الگوهای ری اکت است.

برای مطالعه قسمت های قبلی:

سرفصل های این قسمت:

Proxy components, Style component, Event switch, Layout component

استفاده از Proxy component

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

<button type=&quotbutton&quot>

اینکه بیایم برای همه دکمه ها از صفت type و نوع button استفاده کنیم کار درستی نیست ( احتمال وجود خطا رو افزایش میده) به جاش از یک کامپوننت مرتبه بالاتر استفاده می‌کنیم:

const Button = props =>
  <button type=&quotbutton&quot {...props}>

خوب حالا به راحتی می‌شه کامپوننت Button رو هرجایی که خواستیم استفاده کنیم و خیالمون راحت باشه که صفت type همه دکمه ها همواره button هستش.

<Button />
// <button type=&quotbutton&quot><button>

<Button className=&quotCTA&quot>Send Money</Button>
// <button type=&quotbutton&quot class=&quotCTA&quot>Send Money</button>

استفاده از Style component

مثل پروکسی کامپوننت ، اما این بار با طعم استایل!

یک دکمه داریم که می‌خواهیم با کلاس primary اون رو نمایش بدیم:

<button type=&quotbutton&quot className=&quotbtn btn-primary&quot>

خب، برای نمایش این دکمه می‌تونیم از چندین روش استفاده کنیم:

import classnames from &quotclassnames&quot

const PrimaryBtn = props => <Btn {...props} primary />;

const Btn = ({ className, primary, ...props }) => (
  <button
    type=&quotbutton&quot
    className={classnames(&quotbtn&quot, primary && &quotbtn-primary&quot, className)}
    {...props}
  />
);

نکته: ماژول classnames به ما کمک می‌کنه که از چندتا کلاس ( استایل ) استفاده کنیم و بتونیم استایل های مختلف رو باهمدیگه ترکیب کنیم.

به صورت تصویری می‌تونیم ببینیم که :

PrimaryBtn()
  ↳ Btn({primary: true})
    ↳ Button({className: &quotbtn btn-primary&quot}, type: &quotbutton&quot})
      ↳ '<button type=&quotbutton&quot class=&quotbtn btn-primary&quot></button>'

درنهایت این ۳ تا کامپوننت که می‌بینید یکی هستند:

<PrimaryBtn />
<Btn primary />
<button type=&quotbutton&quot className=&quotbtn btn-primary&quot />

این روش کمک می‌کنه که نگه داری استایل ها تو کامپوننت ساده تر باشه.

استفاده از Event switch

معمولا زمانی که تابع handler می‌نویسیم ، اسم کاری که می‌خواهیم انجام بدیم رو هم اضافه می‌کنیم، مثل این تابع که اسم کلیک کردن رو بهش اضافه کردیم:

handleClick(e) { /* do something */ }

برای کامپوننتی که چندین رویداد مختلف رو مدیریت می‌کنه، این اسم تابع می‌تونه تکراری باشه:

handleClick() { require(&quot./actions/doStuff&quot)(/* action stuff */) }
handleMouseEnter() { this.setState({ hovered: true }) }
handleMouseLeave() { this.setState({ hovered: false }) }

‌می‌تونیم یک تابع handler داشته باشیم و از switch / case کمک بگیریم:

handleEvent({type}) {
  switch(type) {
    case &quotclick&quot:
      return require(&quot./actions/doStuff&quot)(/* action dates */)
    case &quotmouseenter&quot:
      return this.setState({ hovered: true })
    case &quotmouseleave&quot:
      return this.setState({ hovered: false })
    default:
      return console.warn(`No case for event type &quot${type}&quot`)
  }
}

همچنین برای کامپوننت های ساده می‌تونیم به جای نوشتن تابع handler ، از خود اکشن به همراه arrow function استفاده کنیم. مثال زیر نحوه انجام این کار رو نشون میده :

<div ={() => someImportedAction({ action: &quotDO_STUFF&quot })}

استفاده از Layout component

بعضی از کامپوننت ها وظیفه صفحه بندی (‌لایه های سایت و ... ) رو به عهده دارند. ازونجایی که این سبک کامپوننت ها، المنت های استاتیک DOM رو تشکیل میدهند پس لازم نیست که دائم در حال آپدیت شدن باشند.

کامپوننتی رو در نظر بگیرید که دوتا children رو در کنار هم رندر می‌کنه:

<HorizontalSplit
  leftSide={<SomeSmartComponent />}
  rightSide={<AnotherSmartComponent />}
/>

خب ، می‌خواهیم این کامپوننت رو بهینه کنیم ( چون کارش استایل دهی و لایه بندی صفحه هست ، نیازی نیست که دائم در حال آپدیت شدن باشه).
ما می‌تونیم بدون اینکه لایف سایکل کامپوننت های فرزند رو تغییر بدیم، اجازه ندیم که کامپوننت پدر آپدیت شه:

class HorizontalSplit extends React.Component {
  shouldComponentUpdate() {
    return false;
  }

  render() {
    return (
      <FlexContainer>
        <div>{this.props.leftSide}</div>
        <div>{this.props.rightSide}</div>
      </FlexContainer>
    );
  }
}

قسمت آخر این نوشته:

سایر مقاله های من در ویرگول:

Follow me on social media
Telegram
Facebook
Twitter
Linkedin
Virgool