Pulse Of The Blogosphere » ReactJS – 4.3. Class: Lifecylce

HOME / Javascript / ReactJS old / ReactJS – 4.3. Class: Lifecylce

ReactJS – 4.3. Class: Lifecylce

Author: admin - Posted: 15/07/21 - Update: 15/07/21

Life cycle ReactJS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ReactJS</title>
</head>

<body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
        class App extends React.Component {
            constructor(props) {
                super(props);
                console.log("App - Constructor");
                this.state = {
                    showCounter: true,
                }
            };

            render() {
                console.log("App - Render");
                return (
                    <div>
                        <button onClick={() => { this.setState({ showCounter: !this.state.showCounter }) }}>
                            Remove Counter Component
                        </button><br /><br />
                        {this.state.showCounter ? <Counter /> : ''}
                    </div>
                );
            }
        }

        //Vòng đời của Compomnent được liệt kê dưới đây
        class Counter extends React.Component {
            constructor(props) {
                super(props);
                console.log("Counter - Constructor");
                this.state = {
                    count: 0,
                }
            }

            // UNSAFE_componentWillMount() {
            //     console.log('Counter - UNSAFE_componentWillMount')
            // }

            // UNSAFE_componentWillReceiveProps(newProps) {
            //     console.log('Counter - UNSAFE_componentWillReceiveProps')
            // }

            // UNSAFE_componentWillUpdate(nextProps, nextState) {
            //     console.log('Counter - UNSAFE_componentWillUpdate');
            // }

            // getDerivedStateFromProps là API mới, để loại bỏ 3 API không an toàn phía trên (đã bị thêm chữ UNSAFE_)
            static getDerivedStateFromProps(props, state) {
                console.log('Counter - getDerivedStateFromProps')
                //return null: không thay đổi trạng thái
                return null;
            }

            shouldComponentUpdate(newProps, newState) {
                console.log('Counter - shouldComponentUpdate');
                //return true: nghĩa là luôn update khi Component cha của nó render lại: UNSAFE_componentWillReceiveProps -> UNSAFE_componentWillUpdate -> Render -> componentDidMount
                //return false: ngược lại, lifecycle chỉ chạy đến: UNSAFE_componentWillReceiveProps -> stop
                if (this.state.count === newState.count) {
                    return false
                }
                return true;
            }

            render() {
                console.log("Counter - Render");
                return (
                    <div>
                        <button onClick={() => { this.setState({ count: this.state.count + 1 }) }}>Counter Increment</button>
                        <h3>Counter Count: {this.state.count}</h3>
                    </div>
                );
            }

            getSnapshotBeforeUpdate(prevProps, prevState) {
                console.log('Counter - getSnapshotBeforeUpdate')
                //return null: không thay đổi trạng thái
                return null;
            }

            //Thường thì chỉ dùng 3 function chính dưới đây
            componentDidMount() {
                //Chỉ thực hiện 1 lần duy nhất khi Component được khởi tạo
                //Gọi API tại đây
                console.log('Counter - componentDidMount')
            }

            componentDidUpdate(prevProps, prevState) {
                //HẠN CHẾ DÙNG, và khi dùng phải cực kỳ cẩn thận
                //Không được setState bên trong DidUpdate ==> vì nó sẽ sinh ra vòng lặp vô tận :((
                console.log('Counter - componentDidUpdate');
            }

            componentWillUnmount() {
                //Chỉ thực hiện 1 lần duy nhất khi Component bị hủy
                //Clear Timeout hoặc Interval tại đây, hoặc Reset dữ liệu Redux
                console.log('Counter - componentWillUnmount')
            }

        }

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

    </script>
</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

<!DOCTYPE html>

<head>

<title>ReactJS</title>

</head>

<body>

class App extends React.Component {

constructor(props) {

super(props);

console.log("App - Constructor");

this.state = {

showCounter: true,

}

};

render() {

console.log("App - Render");

return (

<div>

<button onClick={() => { this.setState({ showCounter: !this.state.showCounter }) }}>

Remove Counter Component

</button><br /><br />

{this.state.showCounter ? <Counter /> : ''}

</div>

);

}

//Vòng đời của Compomnent được liệt kê dưới đây

class Counter extends React.Component {

constructor(props) {

super(props);

console.log("Counter - Constructor");

this.state = {

count: 0,

}

// UNSAFE_componentWillMount() {

// console.log('Counter - UNSAFE_componentWillMount')

// }

// UNSAFE_componentWillReceiveProps(newProps) {

// console.log('Counter - UNSAFE_componentWillReceiveProps')

// }

// UNSAFE_componentWillUpdate(nextProps, nextState) {

// console.log('Counter - UNSAFE_componentWillUpdate');

// }

// getDerivedStateFromProps là API mới, để loại bỏ 3 API không an toàn phía trên (đã bị thêm chữ UNSAFE_)

static getDerivedStateFromProps(props, state) {

console.log('Counter - getDerivedStateFromProps')

//return null: không thay đổi trạng thái

return null;

}

shouldComponentUpdate(newProps, newState) {

console.log('Counter - shouldComponentUpdate');

//return true: nghĩa là luôn update khi Component cha của nó render lại: UNSAFE_componentWillReceiveProps -> UNSAFE_componentWillUpdate -> Render -> componentDidMount

//return false: ngược lại, lifecycle chỉ chạy đến: UNSAFE_componentWillReceiveProps -> stop

if (this.state.count === newState.count) {

return false

}

return true;

}

render() {

console.log("Counter - Render");

return (

<div>

<button onClick={() => { this.setState({ count: this.state.count + 1 }) }}>Counter Increment</button>

<h3>Counter Count: {this.state.count}</h3>

</div>

);

}

getSnapshotBeforeUpdate(prevProps, prevState) {

console.log('Counter - getSnapshotBeforeUpdate')

//return null: không thay đổi trạng thái

return null;

}

//Thường thì chỉ dùng 3 function chính dưới đây

componentDidMount() {

//Chỉ thực hiện 1 lần duy nhất khi Component được khởi tạo

//Gọi API tại đây

console.log('Counter - componentDidMount')

}

componentDidUpdate(prevProps, prevState) {

//HẠN CHẾ DÙNG, và khi dùng phải cực kỳ cẩn thận

//Không được setState bên trong DidUpdate ==> vì nó sẽ sinh ra vòng lặp vô tận :((

console.log('Counter - componentDidUpdate');

}

componentWillUnmount() {

//Chỉ thực hiện 1 lần duy nhất khi Component bị hủy

//Clear Timeout hoặc Interval tại đây, hoặc Reset dữ liệu Redux

console.log('Counter - componentWillUnmount')

}

ReactDOM.render(

<App />,

document.getElementById('root')

);

</script>

</body>

</html>

ReactJS old

ReactJS – 1. Hook và Class