کامپوننت های خنگ و کامپوننت های باهوش در ری اکت؟!

چند وقت پیش در مصاحبه شرکتی به این مفهوم بر خوردم Dumb Components and Smart Components و برق از چشام پرید اوووو شت لعنتی این چیه دیگه! و بعد از ریختن پَرهام چند روز بعد با سرچ فهمیدم که چه مفهوم ساده ای بوده و بلد بودم! مفهومی که کسی که تازه ری اکت رو هم شروع میکنه بلده ولی به خاطر این که این مفهوم رو با این اسم نمیدونستم فک کردم بلد نیستم!

پس حتی اگه آورده این پست براتون این باشه که بدونید این کانسپت رو با این نام هم میگن شاید براتون کافی باشه تا اگه جایی شنیدید برق از چشماتون نپره!

این کانسپت یکی از بسیار اصولی است که باید در ری اکت بدونید و رعایتش کنید.

اسم دیگه Dumb Component and Smart Component (کامپوننت های خنگ و کامپوننت های باهوش :)) ) Presentational Component and Container Component هم هست یا Stateful Component StateLess Component هم میگن.

کامپوننت های خنگ (Dumb Component (Presentational Component

این کامپوننت ها اغلب برای نمایش دیتا توی DOM استفاده میشن. و هیچ لاجیک فانکشن و استیت داخلی ندارند.

از این رو بهشون کامپوننت های خنگ گفته میشه هر چی رو که بهشون پاس بدی همون رو نمایش میده و بیشتر یک UI Component هستند در نتیجه اغلب این کامپوننت ها بیشتر reusable خواهند بود.

const header = (props) => {
  return (
    <div>
      <h1> {props.title} </h1>
    </div>
  )
}

کامپوننت های باهوش (Smart Component / Stateful Component (Container Component

در طرف دیگه کامپوننت های باهوش رو داریم این کامپوننت ها اغلب state داخلی دارند و در این کامپوننت ها هست که باید نگران چگونگی کار کردن اپمون باشیم.

این کامپوننت های دیتا ، فانکشن یا پراپسی که دریافت میکنن رو با پردازشی که روشون انجام میدن دیتا رو نمایش یا به کامپوننت باهوش یا خنگ دیگه پاس میدن.

با توجه به تفاسیر پس باید این کامپوننت ها Class Component باشن یا اگه از Function Component استفاده میشه از hook استفاده بشه که بتونه state و لایف سایکل هارو در این کامپوننت ها داشته باشیم.

class Page extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      firstTimeLoading: true,
    }
  }
 
  render() {
    return (
      {this.state.firstTimeLoading && <Header title={this.props.title}/>}
      {this.state.firstTimeLoading || <Header title="Welcome Again"/>}
    );
  }
}

نتیجه گیری و مثال

استفاده از این کانسپت (دیزاین پترن) بهتون کمک میکنه تا لاجیک و UI خودتون رو از هم جدا کنید و ساختاری بهتری رو برای اپتون داشته باشید.

برای مثال شما فکر کنید که باتنی توی اپتون دارید و قرار در بعضی از صفحات به ازای کلیک روی این باتن api کال بشه حالا راه کار چیه؟!

میتونید هر باتن رو جدا در نظر بگیرید و ساختار خودشو داشته باشه که اینطوری باید به ازای هر باتن در صفحه کد جدا بنویسید!

ولی راه حل درست اینه که باتن رو به عنوان یک کامپوننت باهوش در نظر بگیریم که به ازای هر بار کلیک اکشنی به پرنتش پاس بده و api کالمون تو پرنتش رخ بده نه توی خود کامپوننت باتن! با این کار کامپوننت باتن رو reusable کردیم و همه جای اپمون میتونیم ازش استفاده کنیم.