React:新旧生命周期及其对比

概述

不管是vue还是React，它都有一个生命周期，它描述了组件从创建到销毁的整个生命过程，其中含有有很多的钩子函数连接而成。这里主要讲React新旧生命周期，以及他们的对比

---

生命周期（旧）

周期图如下

其中左边是挂载时，右边是更新时，下边是卸载时

挂载时

可以看出挂载时的更新数据顺序依次如下
1）constructor：构造器
2）componentWillMount：组件将要挂载
3）render：渲染
4）componentDidMount：组件挂载完成

可以通过代码来进行验证

  class Life extends React.Component{
   
            // 构造器
            constructor(props){
   
                super(props)
                console.log("constructor");
            }
            // 组件将要挂载的钩子
            componentWillMount(){
   
                console.log("componentWillMount");
            }
            // 渲染
            render(){
   
                console.log("render");
                return(
                    <div>
                        <button onClick={
   this.remove}>卸载组件</button>
                    </div>
                )
            }
            // 组件挂载完毕的钩子
            componentDidMount(){
   
                console.log("componentDidMount");
            }
            // 组件将要卸载的钩子
            componentWillUnmount(){
   
                console.log("componentWillUnmount");
            }
            remove=()=>{
   
                ReactDOM.unmountComponentAtNode(document.getElementById("root"))
            }
        }
        ReactDOM.render(<Life/>,document.getElementById("root"))

打印结果如图

当然这并不和函数声明顺序有关，这里不更改顺序做演示。

更新时