16.3之前的生命周期
16.3的生命周期
与16.4的区别在于调用getDerivedStateFromProps的时机，16.4增加了setState和forceUpdate两种情况。因为这很容易引发一些问题（暂时不知道可能引发的问题），所以React在16.4中对此进行了更改。
16.4之后的生命周期
shouldComponentUpdate
1、决定Virtual DOM是否要重绘。
2、一般可以由PureComponent自动实现。
3、典型场景：性能优化。
getDerivedStateFromProps的用法
getDerivedStateFromProps是一个静态函数，只有一个目的就是让组件在props变化时更新state，即state的值在任何时候都取决于 props。
1、当state需要从props初始化时使用。
2、尽量不要使用：维护两者状态一致性会增加复杂度。
3、每次render都会调用。
4、典型场景：表单控件获取默认值
getSnapshotBeforeUpdate用法
典型场景：获取render之前的DOM状态
少用 但可能用于处理UI 如下官方案例。getSnapshotBeforeUpdate的参数是之前的props和之前的state,可用于与现在的props和现在的state进行一些操作，返回值作为componentDidUpdate的第三个参数返回。
class ScrollingList extends React.Component {
constructor(props) {
super(props);
this.listRef = React.createRef();
}
getSnapshotBeforeUpdate(prevProps, prevState) {
// 我们是否在 list 中添加新的 items ？
// 捕获滚动位置以便我们稍后调整滚动位置。
if (prevProps.list.length < this.props.list.length) {
const list = this.listRef.current;
return list.scrollHeight - list.scrollTop;
}
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
// 如果我们 snapshot 有值，说明我们刚刚添加了新的 items，
// 调整滚动位置使得这些新 items 不会将旧的 items 推出视图。
//（这里的 snapshot 是 getSnapshotBeforeUpdate 的返回值）
if (snapshot !== null) {
const list = this.listRef.current;
list.scrollTop = list.scrollHeight - snapshot;
}
}
render() {
return (
<div ref={this.listRef}>{/* ...contents... */}</div>
);
}
}
总结 生命周期前后的差异
