React和Vue生命周期、渲染顺序

主要就是命名不同

目录

React

组件挂载

挂载前constructor()

挂载时render()

挂载后componentDidMount()：初始化节点

更新

更新时render()：prop/state改变

更新后componentDidUpdate()

卸载

卸载前componentWillUnmount()：清理

Vue

初始阶段：beforeCreate、created、beforeMount、mounted

更新阶段：beforeUpdate、updated

销毁阶段：beforeUnmout、unmounted

---

React

组件挂载

挂载前constructor()

如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数

挂载时render()

class 组件中唯一必须实现的方法。

挂载后componentDidMount()：初始化节点

组件（插入 DOM 树中） 立即调用。依赖于 DOM 节点的初始化应该放在这里。

更新

更新时render()：prop/state改变

它只有在 prop 或state 发生变化时才可能更新和重新渲染。

更新后componentDidUpdate()

首次渲染不会执行此方法。

卸载

卸载前componentWillUnmount()：清理

在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。

​

class Welcome extends React.Component {
    state = {
        msg: 'hello world'
    }
    constructor(props){
        super(props);
        console.log('constructor');
    }
    componentDidMount = () => {
        // react中发起ajax请求的初始操作，在这个钩子中完成
        console.log('componentDidMount');
    }
    componentDidUpdate = () => {
        // 等DOM更新后触发的钩子
        console.log('componentDidUpdate');
    }
    componentWillUnmount = () => {
        console.log('componentWillUnmount');
    }
    handleClick = () => {  
        /* this.setState({
          msg: 'hi react'
        }); */
        //this.forceUpdate();
        root.unmount();   // 触发卸载组件
    }
    render(){
        console.log('render');
        return (
            <div>
                <button onClick={this.handleClick}>点击</button>
                { this.state.msg }
            </div>
        );
    }
}

Vue

初始阶段：beforeCreate、created、beforeMount、mounted

一般在，created，mounted中都可以发送数据请求 ，但是，大部分时候，会在created发送请求。因为这样可以更短的时间去响应数据。

更新阶段：beforeUpdate、updated

销毁阶段：beforeUnmout、unmounted