React Component Lifecycle

Khi sử dụng react hẳn các bạn đã quen với việc sử dụng component nhưng chưa hẳn mọi người đã hiểu hết về Lifecycle của nó. Bài viết này mình xin chia sẻ kiến thức của mình về Component Lifecycle.

Trong react sẽ có các lifecycle như sau

1, componentWillMount()

Được gọi một lần duy nhất trước khi component được thêm vào Dom

2, componentDidMount()

Được gọi vào thời điểm ngay sau khi component được thêm vào Dom.

việc gọi đến server để load dữ liệu cũng thường được sử dụng tại đây.

3, componentWillReceiveProps()

Được gọi vào thời điểm mà Prop bị thay đổi. Nhưng sẽ không được gọi vào thời điểm render đầu tiên.

4, componentWillUnmount()

Được gọi trước khi component bị xoá khỏi DOM

5, componentWillUpdate()

Được gọi vào thời điểm component có sự thơi đổi. Nhưng cũng giống như componentWillReceiveProps nó sẽ không được gọi vào thời điểm render đầu tiên.

6, componentDidUpdate()

Cũng như componentDidMount hàm này sẽ được gọi vào thời điểm sau khi component dược update.

7, shouldComponentUpdate()

khác với tất cả những hàm trên. hàm này trả về giá trị true, false. Hàm này được gọi trước khi rerender . Tuỳ thuộc vào giá trị true, false mà việc rerender được thực hiện tiếp hay là không.

Lý thuyết có vẻ hơi nhiều chúng ta thử qua một ví dụ để hiểu dõ hơn nhé:

import React from 'react';

export default class Hello extends React.Component {
    constructor() {
        super();
        this.state = {name: "Thangkc"};
    }

    componentWillMount(){
        console.log("componentWillMount")
    }
    componentDidMount(){
        console.log("componentDidMount")
    }

    componentWillUpdate(){
        console.log("componentWillUpdate")
    }

    componentDidUpdate(){
        console.log("componentDidUpdate")
    }

    render() {
        return (
           

                Not found! {this.hello()}
                Hello Duy;
           
        );
    }

    helloDuy(){
        this.setState({name: "DuyBQ"})
    }

    hello(){
        console.log("Hello " + this.state.name)
    }
}

Với một Component Hello như ở trên khi chạy lần đầu tiên bạn sẽ thấy màn hình log xuât hiện như sau

componentWillMount 
Hello Thangkc
componentDidMount

Như các bạn đã thấy hàm componentWillMount sẽ được gọi trước khi render. Sau khi render xong dữ liệu(được thể hiện bằng dòng Hello Thangkc được in ra) thì hàm componentDidMount được gọi.

Bây giờ trên màn hình bạn click vào nút Hello Duy thì việc gì sẽ sảy ra?

Như bạn thấy trên màn hình log sẽ tiếp tục được in thêm các dòng như sau

componentWillUpdate 
Hello DuyBQ
componentDidUpdate

Đúng như những gì mình đã chia sẻ ở trên. Khi ta click vào nut “Hello Duy” thì đã thực hiện việc chạy hàm helloDuy và update sate. Khi sate được update nó sẽ lập tức gọi đến hàm componentWillUpdate trước khi render lại dữ liệu. Sau khi render lại dữ liệu(được thể hiện bằng dòng “Hello DuyBQ” được in ra) thì lập tực hàm componentDidUpdate được gọi thực thi.

Có lẽ với vi dụ vừa rồi chúng ta đã phần nào hiểu rõ hơn được về Component Lifecycle. Chúc các bạn một ngày mới vui vẻ và mong rằng những chia sẻ của mình ở trên sẽ giúp đỡ được các bạn.