Remove componentWillMount, componentWillReceiveProps, and componentWillUpdate . (Only the new “UNSAFE_” lifecycle names will work from this point forward.)
从 React 官网博客中得知，React 将在 17.0 版本移除掉组件的三个生命周期函数。但是为了版本升级的平滑过渡，UNSAFE_开头的方法予以保留（既可以通过 UNSAFE_componentWillMount 使用）
These lifecycle methods have often been misunderstood and subtly misused; furthermore, we anticipate that their potential misuse may be more problematic with async rendering.
官网对于为何移除这三个生命周期函数给予了上面的说明，简单来说就是这三个生命周期函数容易被误解并滥用，可能会对异步渲染造成潜在的问题
所以，React 这次引入了两个新的生命周期函数来替代这三个生命周期函数，下面一起来看一下
getDerivedStateFromProps
从方法名上我们可以看出这个方法是用来根据传入的 props 来更新 state 的，这种场景我们在写项目中经常会遇到，比如一个 tab 组件的高亮。以前我们会使用 componentWillReceiveProps 来做判断，如果前后 props 不相等，然后就 setState 等等。 现在通过 getDerivedStateFromProps 方法，我们可以直接很方便的实现这种场景
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.pos !== prevState.pos) {
return {
pos: nextProps.pos
}
}
return null
}
注意有几点，getDerivedStateFromProps 方法是一个 static 方法，意味着这个方法是属于 React.Component 类的方法，所以方法内是无法使用 this 的，这就意味着无法使用 this.setState 来更新 state，所以这个方法直接通过返回对象的形式来更新 state，如果某些 props 的情况不需要更新 state，那么就返回 null 就好。实际上这个方法和 componentDidUpdate 搭配使用，就能覆盖 componentWillReceiveProps 的所有使用场景了
getSnapshotBeforeUpdate
另外一个方法，首先它不是一个静态方法，从名字来看是在更新之前获取组件的快照。就是这样，这个方法会在组件更新前出发，它的返回值会作为第三个参数传递给后面的 componentDidUpdate 参数中，和 componentDidUpdate 一起使用，能覆盖掉 componentWillUpdate 的所有使用场景了
class ScrollingList extends React.Component {
listRef = null;
getSnapshotBeforeUpdate(prevProps, prevState) {
// Are we adding new items to the list?
// Capture the scroll position so we can adjust scroll later.
if (prevProps.list.length < this.props.list.length) {
return (
this.listRef.scrollHeight - this.listRef.scrollTop
);
}
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
// If we have a snapshot value, we've just added new items.
// Adjust scroll so these new items don't push the old ones out of view.
// (snapshot here is the value returned from getSnapshotBeforeUpdate)
if (snapshot !== null) {
this.listRef.scrollTop =
this.listRef.scrollHeight - snapshot;
}
}
render() {
return (
<div ref={this.setListRef}>
{/* ...contents... */}
</div>
);
}
setListRef = ref => {
this.listRef = ref;
};
}
