Thêm các phương thức vòng đời vào một lớp

Trong các ứng dụng có nhiều thành phần, điều rất quan trọng là giải phóng tài nguyên được thực hiện bởi các thành phần khi chúng bị phá hủy.

Chúng tôi muốn thiết lập bộ hẹn giờ bất cứ khi nào Clock được hiển thị cho DOM lần đầu tiên. Điều này được gọi là "gắn kết" trong React.

Chúng tôi cũng muốn xóa bộ định thời đó bất cứ khi nào DOM được tạo ra bởi Clock bị xóa. Điều này được gọi là "unmounting" trong React.

Chúng ta có thể khai báo các phương thức đặc biệt trên lớp thành phần để chạy một số mã khi một thành phần gắn kết và tháo gắn kết:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Những phương pháp này được gọi là "móc vòng đời" hay “lifecycle hooks”..

Hook componentDidMount () chạy sau khi đầu ra thành phần được trả về DOM. Đây là nơi tốt để thiết lập bộ hẹn giờ:

Trong khi this.props được thiết lập bởi React và this.state có một ý nghĩa đặc biệt, bạn có thể tự do thêm các trường bổ sung vào lớp theo cách thủ công nếu bạn cần lưu trữ thứ gì đó không tham gia vào luồng dữ liệu (như ID hẹn giờ ).

Chúng tôi sẽ xoá bộ đếm thời gian trong móc vòng đời componentWillUnmount ()

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

Các phương thức trong Component Life Cycle :

componentWillMount đây là method sẽ được thực thi trước khi 1 component được render trên cả server side và client side.

componentDidMount method này được thực thi khi 1 component được render trên client side. Đây là nơi các hàm AJAX requests, DOM or update state được thực thi. Method này cũng được sử dụng để kết nối với các JS Framework khác và các function với delayed execution như setTimeout or setInterval.

componentWillReceiveProps sẽ được thực thi ngay khi thuộc tính props  được update và trước khi component được render lại. 

shouldComponentUpdate sẽ trả về kết quả true or false. Phương thức này sẽ xác định 1 component có được update hay không. Mặc định giá trị này là true. Nếu bạn không muốn component render lại sau khi update state hay props thì return giá trị thành false. 

componentWillUpdate được gọi khi chúng ta update state của component trước khi nó render lại.

componentDidUpdate sau khi componentWillUpdate ở trên được gọi xong thì đến lượt nó được goi.

componentWillUnmount được gọi khi chúng ta unmout 1 component kiểu như xóa nó khỏi react.

Có 3 loại lifecycle methods là: Mounting, Updating và Unmounting:

Mounting

componentWillMount
render
componentDidMount

Updating

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

Unmounting

componentWillUnmount
remove DOM