react生命周期_前端react生命周期-优快云博客

本文链接：https://blog.youkuaiyun.com/shao_xuan_/article/details/123371593

三分钟看完react生命周期

react生命周期
React组件的生命周期可以分为三个过程
挂载过程
更新过程
- render
- componentDidUpdate
卸载过程
- componentWillUnmount
过程模拟

react生命周期

组件的生命周期就是React的工作过程，每个组件在网页中也会有被创建、更新和删除，如同有生命的机体一样。

React组件的生命周期可以分为三个过程

装载(挂载)过程（mount）：就是组件第一次在DOM树中渲染的过程
更新过程（update）：组件被重新渲染的过程
卸载过程（unmount）：组件从DOM中被移除的过程

在这里插入图片描述

挂载过程

constructor

就是ES6里的构造函数，创建一个组件类的实例，在这一过程中要进行两步操作：初始化state，绑定成员函数的this环境。

render

render是React组件中最为重要的一个函数。这是react中唯一不可忽略的函数，在render函数中，只能有一个父元素。

render函数是一个纯函数，它并不进行实际上的渲染动作，它只是一个JSX描述的结构，最终是由React来进行渲染过程，render函数中不应该有任何操作，对页面的描述完全取决于this.state和this.props的返回结果，不能在render调用this.setState。

componentDidMount

componentDidMount函数过程通常只能在浏览器端调用，所以我们在这里获取异步数据，而且在componentDidMount调用的时候，组件已经被装载到DOM树上了，还有，可以在这里执行其他库的代码。

更新过程

单来说就是props和state被修改的过程。

render

更新(重新渲染)

componentDidUpdate

已经更新回调

卸载过程

componentWillUnmount

实际中很少用到，这里只有一个，一般在componentDidMount里面注册的事件需要在这里删除。

过程模拟

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        class MyComponent extends React.Component {
            constructor(props) {
                super(props)
                this.state={
                    count:0
                }
                console.log('constructor')
            }
            onclick=()=>{
                this.setState({
                    count:this.state.count+1
                })
            }
            componentDidMount(){
                console.log('did mount')
            }

            componentDidUpdate(){
                console.log('did update')
            }
            componentWillUnmount(){
                console.log('will unmount')
            }

            render() {
                console.log('render')
                return (
                    <div>
                        <p>{this.state.count}</p>
                        <button onClick={this.onclick.bind(this)}>点我</button>
                    </div>
                );
            }
        }
        ReactDOM.render(<MyComponent />, root);
    </script>
</body>