react生命周期

react的生命周期可以分为
三个状态

• Mounting:组件挂载,已插入真实DOM
• Updating:组件更新,正在被重新渲染
• Unmounting:组件移出,已移出真实Dom

四个阶段
创建、实例化、更新、销毁

三个状态又可以细分以下阶段
Mounting/组件挂载相关

componentWillMount
组件将要挂载。在render之前执行，但仅执行一次，即使多次重复渲染该组件，或者改变了组件的state
componentDidMount
组件已经挂载。在render之后执行，同一个组件重复渲染只执行一次

Updating/组件更新相关

componentWillReceiveProps
已加载组件收到新的props之前调用，注意组件初始化渲染时则不会执行
shouldComponentUpdate
组件判断是否重新渲染时调用。该接口实际是在组件接收到了新的props或者新的state的时候会立即调用
componentWillUpdate
组件将要更新
componentDidUpdate
组件已经更新

Unmounting/组件移除相关

componentWillUnmount
在组件将要被移除之前的时间点触发，可以利用该方法来执行一些必要的清理组件将要移除

生命周期中与props和state相关

getDefaultProps
设置props属性默认值
getInitialState
升值state属性初始化

上面说的都是什么鬼，看不懂，下面看代码

执行此代码，可以在控制台看到

image.png

执行了创建和实例化阶段
当我们再代码中再次加入

ReactDOM.render(
    ,
    document.getElementById("container")
)

执行代码

image.png

执行了实例化阶段
当我们在shouldComponentUpdate中返回false

shouldComponentUpdate:function(){
      console.log("shouldComponentUpdate");
      return false;
},

image.png

组件并没有更新

在代码中继续加入

ReactDOM.unmountComponentAtNode(document.getElementById("container"));

执行代码

image.png

组件被移除