State: Quản Lý Trạng Thái Trong Components trong React

Trong React, state là một cơ chế giúp lưu trữ và quản lý trạng thái của một component tại bất kỳ thời điểm nào trong vòng đời của nó. Khi trạng thái thay đổi, React sẽ tự động cập nhật giao diện người dùng (UI) để phản ánh các thay đổi này. State đóng vai trò quan trọng trong việc tạo ra các ứng dụng động và tương tác.

State Là Gì?

State là một đối tượng chứa thông tin mà một component có thể sử dụng để hiển thị hoặc điều khiển hành vi của nó. Trạng thái này có thể thay đổi trong suốt vòng đời của component. Khi state thay đổi, React sẽ tái render component đó và tất cả các component con có liên quan để cập nhật giao diện với giá trị state mới.

Cách Định Nghĩa và Cập Nhật State

Trong React, state có thể được quản lý bằng cách sử dụng phương thức this.setState() trong Class Components, hoặc thông qua hook useState() trong Function Components. Cả hai phương thức này đều cho phép bạn thay đổi trạng thái và đồng thời trigger (kích hoạt) một render lại của component.

1. State trong Class Components

Trong Class Components, state được định nghĩa trong phương thức constructor và có thể được thay đổi thông qua this.setState().

import React, { Component } from 'react';
	
class Counter extends Component {
	  constructor(props) {
	    super(props);
	    // Định nghĩa state ban đầu
	    this.state = {
	      count: 0
	    };
	  }
	
	  increment = () => {
	    // Cập nhật state
	    this.setState({ count: this.state.count + 1 });
	  };
	
	  render() {
	    return (
	      <div>
	        <p>Số lượng: {this.state.count}</p>
	        <button onClick={this.increment}>Tăng</button>
	      </div>
	    );
	  }
}
	
export default Counter;

Trong ví dụ trên:

• this.state = { count: 0 } định nghĩa một state có tên là count với giá trị khởi tạo là 0.
• Phương thức increment thay đổi giá trị của count khi người dùng nhấn nút.

2. State trong Function Components (với useState)

Kể từ React 16.8, Function Components có thể sử dụng hook useState để quản lý trạng thái.

import React, { useState } from 'react';
	
const Counter = () => {
	  // Khởi tạo state với useState
	  const [count, setCount] = useState(0);
	
	  const increment = () => {
	    // Cập nhật state
	    setCount(count + 1);
	  };
	
	  return (
	    <div>
	      <p>Số lượng: {count}</p>
	      <button onClick={increment}>Tăng</button>
	    </div>
	  );
};
	
export default Counter;

Trong ví dụ trên:

• useState(0) khởi tạo state count với giá trị mặc định là 0 và trả về một mảng chứa giá trị hiện tại của state (count) và hàm cập nhật state (setCount).
• Hàm increment gọi setCount để thay đổi giá trị của count khi người dùng nhấn nút.

Tính Chất của State

1. Trạng thái riêng biệt cho mỗi component: Mỗi component có thể có state riêng biệt. Điều này giúp mỗi component có thể quản lý và lưu trữ thông tin riêng của nó mà không ảnh hưởng đến các component khác.
2. State có thể thay đổi: State không phải là giá trị cố định. Chúng có thể thay đổi trong suốt vòng đời của component. Khi state thay đổi, React sẽ tự động rerender (tái render) lại component để cập nhật giao diện người dùng.
3. Tạo giao diện động: State là công cụ chính để tạo ra các giao diện người dùng động. Ví dụ, bạn có thể sử dụng state để thay đổi màu sắc, hiển thị hoặc ẩn các phần tử, hoặc cập nhật thông tin hiển thị trong giao diện người dùng.
4. Không thể thay đổi trực tiếp: Để thay đổi state, bạn phải sử dụng các phương thức cung cấp bởi React như this.setState() trong Class Components hoặc hàm setState trong useState() của Function Components. Không nên thay đổi trực tiếp giá trị của state, vì React cần phải biết khi nào state thay đổi để cập nhật giao diện.

Các Loại State Thường Gặp

1. State địa phương (Local State): Đây là loại state chỉ được sử dụng trong một component duy nhất và không cần chia sẻ với các component khác. Ví dụ: một giá trị nhập liệu trong form, số lượng đếm, trạng thái của một checkbox.
2. State toàn cục (Global State): Nếu một số state cần được chia sẻ giữa nhiều component, bạn có thể sử dụng các thư viện quản lý state như Redux hoặc Context API của React để quản lý trạng thái toàn cục trong toàn bộ ứng dụng.
3. State không đồng bộ (Asynchronous State): Việc cập nhật state trong React là không đồng bộ, nghĩa là React sẽ cập nhật trạng thái và sau đó mới tiến hành render lại UI. Điều này có nghĩa là khi bạn gọi this.setState() hoặc setCount(), giá trị của state không thay đổi ngay lập tức. Thay vào đó, React sẽ thực hiện cập nhật và render lại khi các thay đổi được hoàn tất.

Ví Dụ Sử Dụng State trong Các Tình Huống Khác

1. Quản lý trạng thái của form

import React, { useState } from 'react';
	
const Form = () => {
	  const [name, setName] = useState('');
	
	  const handleInputChange = (e) => {
	    setName(e.target.value);
	  };
	
	  const handleSubmit = (e) => {
	    e.preventDefault();
	    alert('Tên bạn là: ' + name);
	  };
	
	  return (
	    <form onSubmit={handleSubmit}>
	      <input
	        type="text"
	        value={name}
	        onChange={handleInputChange}
	        placeholder="Nhập tên"
	      />
	      <button type="submit">Gửi</button>
	    </form>
	  );
};
	
export default Form;

Trong ví dụ này, chúng ta sử dụng state name để lưu trữ giá trị người dùng nhập vào trong một form. Hàm handleInputChange cập nhật state khi người dùng thay đổi giá trị trong ô nhập liệu.

##Kết Luận State là một trong những khái niệm cơ bản và quan trọng nhất trong React. Nó giúp bạn quản lý và lưu trữ dữ liệu thay đổi trong ứng dụng, đồng thời đồng bộ hóa giao diện người dùng với trạng thái của ứng dụng. Việc sử dụng state một cách hiệu quả sẽ giúp tạo ra các ứng dụng React động và dễ dàng tương tác. Từ việc quản lý form, theo dõi sự kiện người dùng, đến việc xây dựng các ứng dụng phức tạp, state là công cụ mạnh mẽ để xây dựng ứng dụng React.