State trong ReactJS

State là một tính năng trong React cho phép component quản lý trạng thái của chính nó.

Trạng thái là một đối tượng lưu trữ dữ liệu tạm thời của component.

Khi trạng thái thay đổi, React sẽ tự động render lại giao diện.

Ví dụ:

import React from 'react';

class Counter extends React.Component {
  state = {
    count: 0
  };

  increment = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  decrement = () => {
    this.setState({
      count: this.state.count - 1
    });
  };

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    );
  }
}

export default Counter;

Trong ví dụ trên, component Counter là một Stateful Component với trạng thái ban đầu là { count: 0 }.

Khi nhấn nút "+", giá trị của trạng thái count sẽ tăng lên 1; khi nhấn nút "-", giá trị của trạng thái count sẽ giảm đi 1.

Khi trạng thái thay đổi, React sẽ tự động render lại giao diện với giá trị mới của trạng thái count.