آموزش ReactJS – فصل پنجم: استیت (State)

در ری اکت State جاییست که دیتا از آن می آید. اگر قصد ارائه داده به کامپوننت ها را دارید می توانید از State در ری اکت برای انجام این کار استفاده کنید.

توجه داشته باشید که همیشه باید استیت را ساده و کاملا قابل فهم نگه دارید. همچنین تعداد کامپوننت های دارای state یا همان sateful را در کمترین میزان نگه دارید.

به عنوان مثال اگر شما ده کامپوننت استفاده کننده از استیت دارید، بهتر است یک کامپوننت نگهدارنده (کانتینر) برای تمام کامپوننت ها بسازید و state را در آن یک کامپوننت مدیریت کنید. (در فصل آینده خواهید آموخت که چگونه اطلاعات را با استفاده از پراپ ها به دیگر کامپوننت ها منتقل کنید)

استفاده از State در ReactJS

مثال زیر نشان می دهد که چگونه می توانید یک کامپوننت stateful در ری اکت با سینتکس EcmaScript2016 ایجاد کنید.

کد زیر محتویات فایل App.jsx خواهد بود:

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         header: "Header from state...",
         content: "Content from state..."
      }
   }
   render() {
      return (
         <div>
            <h1>{this.state.header}</h1>
            <h2>{this.state.content}</h2>
         </div>
      );
   }
}
export default App;

در کد بالا در متود سازنده یا همان constructor() ما با استفاده از this.state، تعدادی داده را مشخص کرده ایم. سپس در فانکشن render() با استفاد از this.state دوباره به این داده ها دسترسی پیدا می کنیم.

کد زیر محتویات فایل index.js است:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('root'));

اجرای کد های بالا نتیجه ای شبیه تصویر زیر خواهد داشت: