React 生命周期

首先我们探索下DOM元素的‘生命周期’过程

let div = document.createElement('div')  //创建

div.textContent= 'hi'  //初始值

document.body.appendChild(div)  //挂载

div.textContent = '新的hi' //更新

div.remove()  //消亡

在学习了React的生命周期钩子后，我发现几个常用的生命周期钩子都可以跟DOM元素的周期一一对应。

那么钩子是什么

其实钩子就可以理解为特殊时间所调用的特殊函数。

React常用的生命周期钩子

• constructor()

  初始化props和state

• shouldComponentUpdate()

  允许手动判断是否进行组件更新，根据应用场景灵活设置返回值，来避免不必要的更新。

    return false //阻止UI更新
    return true  //允许UI更新

• render()

  展示视图，return一个表示DOM元素的对象，即虚拟DOM。

• componentDidMount()

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

  加载数据的AJAX请求也可以需要在componentDidMount( )中（官方推荐），同时首次render会执行这个生命周期。

• componentDidUpdate()

  UI更新后执行，也可以发起用于更新数据的AJAX请求（加载数据用componentDidmount），同时首次渲染不会执行componentDidUpdate。

• componentWillUnmount()

  在组件卸载及销毁之前直接调用，组件实例卸载后，将永远不会再挂载它。

  在此方法中执行一下必要的清理工作，比如清理计时器timer，取消网络请求等。