ReactJS - Trạng thái

Statelà nơi bắt nguồn của dữ liệu. Chúng ta nên luôn cố gắng làm cho trạng thái của mình càng đơn giản càng tốt và giảm thiểu số lượng các thành phần trạng thái. Ví dụ: nếu chúng ta có mười thành phần cần dữ liệu từ trạng thái, chúng ta nên tạo một thành phần chứa sẽ giữ trạng thái cho tất cả chúng.

Trạng thái sử dụng

Mã mẫu sau đây cho thấy cách tạo một thành phần trạng thái bằng cú pháp 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'));

Điều này sẽ tạo ra kết quả sau.