React 生命周期及setState原理分析

一 React 生命周期函数：

初始化阶段：

getDefaultProps:获取实例的默认属性
getInitialState:获取每个实例的初始化状态
componentWillMount：组件即将被装载、渲染到页面上
render:组件在这里生成虚拟的 DOM 节点
componentDidMount:组件真正在被装载之后

运行中状态：

componentWillReceiveProps:组件将要接收到属性的时候调用
shouldComponentUpdate:组件接受到新属性或者新状态的时候（返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）,判断是否需要调用 render 方法重新描绘 dom;
componentWillUpdate:组件即将更新不能修改属性和状态
render:组件重新描绘
componentDidUpdate:组件已经更新

销毁阶段：

componentWillUnmount:组件即将销毁
 

二 React V16.3版本新生命周期函数解析：https://juejin.cn/post/6844903600309665799

三个生命周期废除的背景是：将要被移除的三个生命周期函数都是在 render 之前会被调用到的。而根据原来的设计，在这三个生命周期函数中都可以去做一些诸如发送请求，setState 等包含副作用的事情。在老版本的 React 中，这样做也许只会带来一些性能上的损耗，但在 React 开启异步渲染模式之后，就无法再接受这样的副作用产生了。

1. componentWillMount 中代码迁移至 componentDidMount 中；
2. componentWillReceiveProps中代码迁移至 getDerivedStateFromProps及componentDidUpdate中进行相应的重写即可；
3. componentWillUpdate中代码迁移至 componentDidMount 及 getSnapshotBeforeUpdate中；

 

三 setState原理分析：https://juejin.cn/post/6844903636749778958

• setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。
• setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。
• setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次 setState ， setState 的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新。

 

 

 

参考链接：详解React生命周期：https://www.jianshu.com/p/514fe21b9914