11. State trong React JS và cách dùng

Trong lập trình React JS, state là một cơ chế quản lý trạng thái của các thành phần. State cho phép bạn lưu trữ và theo dõi các thông tin có thể thay đổi trong suốt thời gian thực thi của ứng dụng. Khi trạng thái thay đổi, React sẽ tự động cập nhật giao diện để hiển thị trạng thái mới.

Dưới đây là cách sử dụng và quản lý state trong một React Class Component:

Bước 1: Định nghĩa thành phần với trạng thái ban đầu

jsx

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      <div>
        <h1>Counter: {this.state.count}</h1>
      </div>
    );
  }
}

export default Counter;

Bước 2: Thay đổi trạng thái bằng cách sử dụng phương thức setState()

jsx

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

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

  render() {
    return (
      <div>
        <h1>Counter: {this.state.count}</h1>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

Trong ví dụ này:

• Chúng ta định nghĩa lớp Counter kế thừa từ Component.
• Trong phương thức constructor, chúng ta sử dụng this.state để định nghĩa trạng thái ban đầu của thành phần, trong trường hợp này là count.
• Chúng ta định nghĩa phương thức increment sử dụng phương thức setState để thay đổi trạng thái count.
• Trong phương thức render, chúng ta sử dụng trạng thái count để hiển thị giá trị và một nút để gọi phương thức increment.

Khi bạn nhấn vào nút “Increment”, trạng thái count sẽ thay đổi và giao diện sẽ tự động cập nhật để hiển thị giá trị mới.

setState không chỉ cập nhật trạng thái mới mà còn kích hoạt việc cập nhật giao diện, đảm bảo rằng giao diện luôn phản ánh trạng thái hiện tại của ứng dụng. Đó là State trong React JS và cách dùng