Tìm hiểu về Lifecycle của class trong React JS

I. Khái niệm

Trong ReactJS sẽ gồm rất nhiều component cùng nhau để tạo nên thành một app. Mỗi component sẽ có vòng đời phát triển của riêng nó từ khi sinh ra đến lúc chết đi. Trong bài viết này chúng ta cùng nhau tìm hiểu về một vòng đời của component và các method để quản lý vòng đời này.

II. Tổng quan về Lifecycle

Nhìn vào hình ảnh chúng ta có thể chia 1 component gồm 3 phase đó là:

  1. Mounting nghĩa là cho phép người dùng can thiệp vào quá trình can thiệp vào UI khi khởi tạo một component. Nhìn vài ảnh thì nó có 3 lifecyle
  • componentWillMount()
  • render()
  • componentDidMount()
  1. Update đúng như ý nghĩa của cái tên khi chúng ta có cập nhật lại một cái gì của component thì sẽ dùng trong phần này.
    Chúng mình sẽ đi tìm hiểu từng method một nhé
  • componentWillReceiveProps()
  • shouldComponentUpdate()
  • componentWillUpdate()
  • componentDidUpdate()
  1. Unmount: Quá trinh xảy ra khi component được xóa khỏi DOM. Nói cách khách cái này được gọi tới khi không có component nào được gọi ra hoặc người dùng chuyển hướng đến trang khác. Cái này chỉ có một method duy nhất là componetWillUnmount.

III. Chi tiết từng method của Lifecycle

  1. componentWillMount
    Đây là một method sẽ được thực thi ra trước khi một component được render trên cả client hoặc server
  2. render
    Đây là method để render ra cái chúng ta sẽ nhìn thấy trên hiển thị ở màn hình
  3. componentDidMount
    Cái này được thực thi khi một component được thực thi sau khi render ở client.
  4. componentWillReceiveProps
    Hàm này được chạy khi mà props của component đã được sinh ra có sự thay đổi. Phải gọi setState() nếu muốn render lại.
  5. shouldComponentUpdate
    Phương thức sẽ trả về true hoặc false ( Mặc định là true) xác định xem một component có được update hay không.
  6. componentWillUpdate
    Sẽ có 2 tham số truyển vào là nextProps, nextState. Được gọi ngay sau khi shouldComponentUpdate trả về true. Hàm render sẽ thực hiện sau khi gọi hàm này.
  7. componentDidUpdate
    Được gọi khi hàm render gọi 2 lần trở lên. Chú yếu để thao tác với DOM.
  8. componentWillUnmount
    Như cái tên đã gợi ý thì nó sẽ được gọi khi 1 component dược xóa bỏ

IV. EXAMPLE

Chúng ta sẽ khởi tạo 1 app trong file App.js chúng ta dùng code như sau để hiểu rõ hơn:

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         data: 0
      }
      this.setNewNumber = this.setNewNumber.bind(this)
   };
   setNewNumber() {
      this.setState({data: this.state.data + 1})
   }
   render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }
   componentDidMount() {
      console.log('Component DID MOUNT!')
   }
   componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
   }
   shouldComponentUpdate(newProps, newState) {
      return true;
   }
   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }
   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }
   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }
   render() {
      return (
         <div>
            <h3>{this.props.myNumber}</h3>
         </div>
      );
   }
}
export default App;

Trong file index.js ta sửa như sau:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);

Chú ý hàm setTimeout là 10s
Khi render ra chúng ta có giao diện như sau:
image
Và kết quả của Phase Mount là đây:
image
Khi click vào button INCREMENT thì Phase Update sẽ được thực hiện:
image
Và sau 10s thì Phase Unmount sẽ được auto gọi:
image
Để tìm hiểu thêm chúng ta có thể tham khảo tai:
Doc của reactJS
Doc viblo

1 Like

đợt a dùng lifecycle này đúng là ám ảnh thực sự, như 1 mớ hỗn độn
web thì ko thấy rõ chứ mobile app mà render thừa là toang performance ngay :v
Hook như đấng cứu thế cứu rỗi react vậy =))