ReactJS — Các phương thức vòng đời của thành phần

Các thành phần phản ứng có vòng đời của các sự kiện mà chúng trải qua từ khi chúng được tạo cho đến khi chúng bị hủy. Các sự kiện vòng đời này cho phép các nhà phát triển kết nối vào vòng đời của một thành phần tại các điểm khác nhau và thực hiện các hành động nhất định.

Dưới đây là các phương pháp vòng đời chính của một thành phần React, cùng với giải thích ngắn gọn về từng phương pháp và một ví dụ về cách chúng có thể được sử dụng:

constructor(): Phương thức này được gọi trước khi một thành phần được mount (chèn vào DOM). Nó được sử dụng để khởi tạo trạng thái và liên kết các trình xử lý sự kiện.

Thí dụ:

constructor(props) {
  super(props);
  this.state = { count: 0 };
  this.handleClick = this.handleClick.bind(this);
}

Thí dụ:

componentDidMount() {
  axios.get('/items')
    .then(response => this.setState({ items: response.data }));
}

Thí dụ:

shouldComponentUpdate(nextProps, nextState) {
  return nextState.count !== this.state.count;
}

Thí dụ:

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    axios.post('/update-count', { count: this.state.count });
  }
}

Thí dụ:

componentWillUnmount() {
  window.removeEventListener('resize', this.handleResize);
}

render() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <button onClick={this.handleClick}>Click me</button>
    </div>
  );
}

Dưới đây là tóm tắt về các phương thức vòng đời chính của thành phần React:

• constructor(): Khởi tạo trạng thái và liên kết các trình xử lý sự kiện. Được gọi trước khi một thành phần được gắn kết.
• componentDidMount(): Kích hoạt một hành động hoặc lệnh gọi API sau khi thành phần được hiển thị. Được gọi sau khi một thành phần được gắn kết.
• shouldComponentUpdate(): Trả về một giá trị boolean cho biết thành phần đó có nên được cập nhật hay không. Được gọi trước khi một thành phần được kết xuất lại.
• componentDidUpdate(): Kích hoạt một hành động hoặc lệnh gọi API sau khi thành phần được cập nhật. Được gọi sau khi một thành phần được cập nhật.
• componentWillUnmount(): Dọn dẹp tài nguyên hoặc trình lắng nghe sự kiện. Được gọi ngay trước khi một thành phần bị hủy.
• render(): Kết xuất JSX cho một thành phần. Được gọi bất cứ khi nào thành phần cần được kết xuất lại.