حالت(State) های ReactJS

حالت(State) های ReactJS

State یا حالت مکانی است که داده ها از آن سرچشمه می گیرند. همواره بهتر است تا حد امکان حالت خود را ساده در نظر بگیریم و تعداد اجزای حالت دار را به حداقل برسانیم. مثلا اگر ده جزء داشته باشیم که داده هایی را از حالتی نیاز دارند، بهتر است یک جزء نگهدارنده را ایجاد کنیم که این حالت را برای تمامی این اجزا نگهداری کند.

استفاده از Props

در نمونه کد زیر چگونگی ایجاد یک جزء حالت دار با استفاده از سینتکس 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;

main.js

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

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

این کار باعث می شود نتیجه ی زیر نمایش داده شود.

برای مطالعه سرفصل دوره آموزش عملی و کاربردی ReactJS کلیک نمایید .