کامپوننت ها در ReactJS

در این بخش چگونگی استفاده از کامپوننت ها در ReactJS را بررسی خواهیم کرد. استفاده از کامپوننت ها باعث می شود تا فرآیند ایجاد نرم افزار ساده تر شود و در صورت ایجاد تغییر در بخشی از صفحه، تاثیری در سایر بخش ها نمی گذارد.

نمونه Stateless

اولین کامپوننت موجود در این مثال، کامپوننت App است که به عنوان کامپوننت صاحب (اصلی) برای کامپوننت های Header و Content در نظر گرفته می شود. ما کامپوننت های Header و Content را به صورت جداگانه ایجاد و در کامپوننت App اضافه می کنیم.

محتوای فایل App.jsx:

import React from 'react';
class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}
export default App;

برای اینکه بتوانیم این صفحه را رندر کنیم، باید آن را در main.js اضافه کنیم. ما قبلا در بخش آماده سازی محیط این کار را انجام داده ایم.

محتوای فایل main.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));

کد فوق خروجی زیر را تولید می کند:

نمونه Stateful

در این مثال ما state را برای کامپوننت App تنظیم خواهیم کرد. کامپوننت Header مانند مثال بالا اضافه می شود، اما برای کامپوننت Content ما یک جدول ایجاد کرده ایم و به صورت پویا داده های موجود در آرایه data را به یک نمونه از TableRow تبدیل کرده و وارد می کنیم.

در کد زیر ما از سینتکس EcmaScript 2015 استفاده کرده ایم (=>) که بسیار تمیز تر از سینتکس قدیمی جاوا اسکریپت است. استفاده از این سینتکس به ما کمک می کند تا خطوط کدهای نوشته شده را کاهش دهیم. همچنین در هنگام ایجاد لیست هایی با تعداد آیتم زیاد بسیار مفید است.

محتوای فایل App.jsx:

import React from 'react';
class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: 
         [
            {
               "id":1,
               "name":"Foo",
               "age":"20"
            },
            {
               "id":2,
               "name":"Bar",
               "age":"30"
            },
            {
               "id":3,
               "name":"Baz",
               "age":"40"
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <Header/>
            <table>
               <tbody>
                  {this.state.data.map((person, i) => <TableRow key = {i} 
                     data = {person} />)}
               </tbody>
            </table>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.data.id}</td>
            <td>{this.props.data.name}</td>
            <td>{this.props.data.age}</td>
         </tr>
      );
   }
}
export default App;

محتوای فایل main.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));

توجه داشته باشید که ما از key = {i} در داخل تابع map() استفاده کرده ایم. این موضوع به React کمک می کند تا به جای دوباره رندر کردن کل لیست، فقط عناصری که تغییر کرده اند را رندر کند.

خروجی مثال فوق: