React 16 全新生命周期与废弃警告

生命周期变更对照表

废弃方法	替代方案	原因
componentWillMount	constructor + componentDidMount	Render阶段可能重复执行
componentWillReceiveProps	static getDerivedStateFromProps	与Fiber异步渲染不兼容
componentWillUpdate	getSnapshotBeforeUpdate	提交前最后一刻获取DOM状态

新增安全生命周期

class ScrollTracker extends React.Component {
	// 替代 componentWillReceiveProps
	static getDerivedStateFromProps(nextProps, prevState) {
		return nextProps.id !== prevState.id
			? { scrollTop: 0 }
			: null;
	}

	// 提交前捕获DOM状态
	getSnapshotBeforeUpdate() {
		return this.listRef.scrollHeight;
	}

	// 基于快照更新
	componentDidUpdate(prevProps, prevState, snapshot) {
		if(snapshot !== null) {
			this.listRef.scrollTop += this.listRef.scrollHeight - snapshot;
		}
	}
}