Component ها در ری اکت

امید کیانی 1 40 بازدید 1398/06/18
Component ها در ری اکت

قبلا برنامه نویسان هزاران خط کد برای توسعه برنامه ها یا اپلیکیشن های بر بستر (SPA(single page application می نوشتند،این اپلیکیشن ها از ساختار DOM سنتی استفاده می کردند و آن چالش های زیادی را برای انجام کارها ایجاد می کرد. به روزرسانی این ساختار به صورت دستی و در کل برنامه انجام می شد که روش مناسبی نبود.

از این رو رویکرد کامپوننت ها برای غلبه براین موضوع معرفی شد.در این رویکرد کل برنامه به گروه های منطقی کوچکی از کد تقسیم می شوند که اصطلاحا کامپوننت(component) نامیده می شوند.

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

هر کامپوننت ساختار،متد و API های مربوط به خود را دارد و هر زمان که شما نیاز داشته باشید آنها می توانند قابل استفاده مجدد(reusable) باشند.

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

 

در ری اکت دو نوع کامپوننت وجود دارد:

۱- Functional Components

۲- Class Components

Functional Components

در ری اکت،function components ها راهی برای نوشتن component هایی که دارای یک متد render و هیچ گونه حالت خاصی ندارند،هستند.

آنها مانند function های ساده جاوااسکریپت دارای ورودی ها و خروجی های مشخص هستند و در اینجا ما می توانیم (props(properties به عنوان ورودی function، و خروجی آن چیزی است که رندر می شود.

مثال:

function WelcomeMessage(props) {  
  return <h1>Welcome to the , {props.name}</h1>;  
}  

functional component ها به عنوان کامپوننت های بدون حالت(stateless component) شناخته می شوند،زیرا آنها هیچگونه حالت خاصی ندارند.

به مثال زیر توجه کنید:

import React, { Component } from 'react';  
class App extends React.Component {  
   render() {  
      return (  
         <div>  
            <First/>  
            <Second/>  
         </div>  
      );  
   }  
}  
class First extends React.Component {  
   render() {  
      return (  
         <div>  
            <h1>Laraman</h1>  
         </div>  
      );  
   }  
}  
class Second extends React.Component {  
   render() {  
      return (  
         <div>  
            <h2>www.laraman.ir</h2>  
            <p>This websites contains the great CS tutorial.</p>  
         </div>  
      );  
   }  
}  
export default App;  

به عنوان خروجی داریم:

 

Class Components

Class components پیچیده تر از functional components هستند.این نوع کاپوننت ها باید از react اصطلاحا extends کنند و ما می توانیم داده ها را از یک کلاس به کلاس دیگر ارسال کنیم.

برای درک بیشتر به مثال زیر توجه کنید:

class MyComponent extends React.Component {  
  render() {  
    return (  
      <div>This is main component.</div>  
    );  
  }  
}  

Class components ها به عنوان stateful component ها شناخته می شوند،زیرا آنها مدیریت حالت های خاص را بر عهده دارند.

 با یک مثال شروع می کنیم:

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

در این قسمت ما ازسینتکس ES6، (<=) استفاده می کنیم زیرا بسیار خواناتر از سینتکس javascript است.آن به ما کمک می کند تا برنامه و عناصر خود را با تعداد خط کد کمتری ایجاد کنیم.

import React, { Component } from 'react';  
class App extends React.Component {  
 constructor() {  
      super();  
      this.state = {  
         data:   
         [  
            {             
               "name":"Abhishek"             
            },  
            {            
               "name":"Saharsh"             
            },  
            {    
               "name":"Ajay"          
            }  
         ]  
      }  
   }  
   render() {  
      return (  
         <div>  
            <StudentName/>  
            <ul>            
                {this.state.data.map((item) => <List data = {item} />)}           
            </ul>  
         </div>  
      );  
   }  
}  
class StudentName extends React.Component {  
   render() {  
      return (  
         <div>  
            <h1>Student Name Detail</h1>  
         </div>  
      );  
   }  
}  
class List extends React.Component {  
   render() {  
      return (  
         <ul>            
            <li>{this.props.data.name}</li>   
         </ul>  
      );  
   }  
}  
export default App;  

به عنوان خروجی داریم:

امیدواریم کاملا با مفهوم کامپوننت ها در ری اکت آشنا شده باشید.

مقالات مرتبط
حمید تیموری 557 بازدید 1398/03/02
حمید تیموری 821 بازدید 1397/05/14
حمید تیموری 392 بازدید 1397/10/12
حمید تیموری 294 بازدید 1398/03/17
حمید تیموری 100 بازدید 1398/06/03
نظرات (0)
هنوز نظری ثبت نشده است
برای ثبت نظر ابتدا وارد سایت شوید