react的最新生命周期和旧版有一些区别，它删除了包含"will"关键词的钩子函数，增加了getDerivedStateFromProps和getSnapshotBeforeUpdate两个新钩子
getDerivedStateFromProps
getDerivedStateFromProps是React 16.3版本引入的一个新的生命周期钩子函数。它的作用是根据新的props和state来派生出一个新的state。这个生命周期函数在组件实例化、接收新的props、和父组件强制更新的时候都会调用。
它的用法类似于旧版的componentWillReceiveProps，但是getDerivedStateFromProps有两个参数：
- props：最新的props值
- state：当前组件的state
它的返回值应该是一个对象，代表着组件的新状态。如果不需要更新状态，则返回null。
这个函数在一定程度上能够减少由于componentWillReceiveProps导致的bug，因为它必须返回一个新的state，不能直接修改当前的state。这样做有一个好处，就是可以更好地控制状态的变化流程，增加组件的稳定性。
注:这个钩子几乎不使用
getSnapshotBeforeUpdate
getSnapshotBeforeUpdate 是 React 组件生命周期中的一个钩子函数，它在组件更新 DOM 之前调用，常常用于处理在组件更新后，需要获取 DOM 相关信息的情况。
在每次组件更新时，getSnapshotBeforeUpdate 都会被调用，并且在 render 方法之后被调用。其返回值可以作为 componentDidUpdate 方法的第三个参数传入，从而能够在 componentDidUpdate 中访问到前一时刻的 DOM 信息。
一个典型的 getSnapshotBeforeUpdate 方法的实现可能如下所示：
class ExampleComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
this.state = {
message: "",
};
}
getSnapshotBeforeUpdate(prevProps, prevState) {
// 计算更新前的 DOM 高度
const prevHeight = this.myRef.current.scrollHeight;
return prevHeight;
}
componentDidUpdate(prevProps, prevState, snapshot) {
// 对比更新前后的 DOM 高度，并更新其它相关状态
if (snapshot !== null) {
const currentHeight = this.myRef.current.scrollHeight;
if (currentHeight > snapshot) {
this.setState({
message: "Scrolling down" });
} else if (currentHeight < snapshot) {
this.setState({
message: "Scrolling up" });
} else {
this.setState({
message: "No scrolling" });
}
}
}
render() {
return (
<div ref={
this.myRef}>
{
this.props.children}
<p>{
this.state.message}</p>
</div>
);
}
}
在上面的例子中，getSnapshotBeforeUpdate 方法计算了更新前的 DOM 高度并返回。在 componentDidUpdate 方法中，通过比较更新前后的高度，我们可以判断用户是向上滚动还是向下滚动，并更新相应的状态。
小结
生命周期函数是React组件中的一些方法，它们在组件的不同状态下被调用，可以在这些函数中实现一些特定的行为。React组件的生命周期可以分为三个阶段：
- 挂载阶段（Mounting）：组件被创建并插入到DOM中
- 更新阶段（Updating）：组件被重新渲染
- 卸载阶段（Unmounting）：组件被从DOM中移除
下面是React中常用的生命周期函数：
- constructor(props)：初始化组件的状态和属性。
- getDerivedStateFromProps(props, state)：在组件更新前被调用。返回值将会被添加到组件的状态中。
- render()：渲染组件。必须返回一个React元素或null。
- componentDidMount()：组件已经被挂载到DOM中。可以在这个函数中发送请求。
- shouldComponentUpdate(nextProps, nextState)：组件将要更新。可以在这个函数中判断是否需要更新组件。
- getSnapshotBeforeUpdate(prevProps, prevState)：在组件更新前被调用。返回值会传递给componentDidUpdate()函数。
- componentDidUpdate(prevProps, prevState, snapshot)：组件已经更新完毕。可以在这个函数中更新状态或者发送请求。
- componentWillUnmount()：组件将要被卸载，可以在这个函数中清除定时器或者取消请求。
