react 组件生命周期

时间:2020-05-01
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="test">

</div>

<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<script src="js/prop-types.js"></script>

<script type="text/babel">
    // 创建组件
    class TestComponent extends React.Component {
        constructor(props) {
            super(props);
            console.log('constructor');
            this.state = {
                flag: false
            };
            this.handleC1 = this.handleC1.bind(this);
            this.handleC2 = this.handleC2.bind(this);
        }

        handleC1() {
            console.log('更新页面---handleC1');
            let flag = !this.state.flag;
            this.setState({flag});
        }

        handleC2() {
            console.log('卸载组件---handleC2');
            ReactDOM.unmountComponentAtNode(document.getElementById('test'));
        }

        render() {
            console.log('render');
            return (
                <div>
                    <h1>{this.state.flag ? '1' : '2'}</h1>
                    <button onClick={this.handleC1}>修改数据</button>
                    <button onClick={this.handleC2}>销毁组件</button>
                </div>
            );
        }

        // 在渲染前调用
        componentWillMount() {
            console.log('componentWillMount');
        }

        // 在第一次渲染后调用,只在客户端
        componentDidMount() {
            console.log('componentDidMount');
        }

        // 在组件接收到一个新的 prop (更新后)时被调用
        componentWillReceiveProps() {
            console.log('componentWillReceiveProps');
        }

        // 在组件接收到新的props或者state时被调用
        shouldComponentUpdate() {
            console.log('shouldComponentUpdate');
            return true;
        }

        // 在组件从 DOM 中移除之前立刻被调用
        componentWillUnmount() {
            console.log('componentWillUnmount');
        }
    }

    // 渲染虚拟dom
    ReactDOM.render(<TestComponent/>, document.getElementById('test'));
</script>
</body>
</html>

点击修改数据

再次点击修改数据

点击销毁组件