State در ReactJS – آموزش ReactJS

State در ReactJS

State جایی است که داده ها از آن می آیند. ما همیشه باید سعی کنیم تا State ما در ساده ترین شکل ممکن و کمترین تعداد کامپوننت را داشته باشد. برای مثال اگر ما ده کامپوننت که از State اطلاعات می گیرند داشته باشیم، باید یک کامپوننت به عنوان ظرف (Container) ایجاد کنیم و فقط برای یک کامپوننت که شامل ده کامپوننت دیگر است، از State اطلاعات را بگیریم.

استفاده از State

کد ساده زیر نحوه ایجاد کامپوننت 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;

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

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

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

نوشته State در ReactJS – آموزش ReactJS اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.