React的新旧生命周期对比React 的生命周期函数在不同版本中经历了显著变化，尤其是在 16.3 和 17.0 版本

React 的生命周期函数在不同版本中经历了显著变化，尤其是在 16.3 和 17.0 版本后，旧的生命周期函数逐步被废弃，引入了更安全、更高效的新方法。以下是新旧版本生命周期函数的对比及典型使用场景：

一、React 生命周期阶段划分

挂载阶段（Mounting） ：组件实例被创建并插入 DOM。
更新阶段（Updating） ：由 props 或 state 变化触发重新渲染。
卸载阶段（Unmounting） ：组件从 DOM 中移除。
错误处理（Error Handling） ：子组件抛出错误时的处理。

二、新旧版本生命周期对比

旧版本（React 16.3 之前） 17

阶段	生命周期函数	作用
挂载	`componentWillMount`	组件挂载前执行（已废弃，因副作用问题）
	`componentDidMount`	挂载完成，用于数据请求、DOM 操作
更新	`componentWillReceiveProps`	父组件传递新 `props` 时触发（已废弃）
	`shouldComponentUpdate`	决定是否重新渲染（性能优化）
	`componentWillUpdate`	更新前执行（已废弃）
卸载	`componentWillUnmount`	组件销毁前清理定时器、订阅等

新版本（React 16.3+ 及 17.0） 57

阶段	生命周期函数	作用
挂载	`static getDerivedStateFromProps`	根据 `props` 更新 `state`（替代 `componentWillReceiveProps`）
	`componentDidMount`	同旧版本
更新	`getSnapshotBeforeUpdate`	在 DOM 更新前捕获信息（如滚动位置），返回值传给 `componentDidUpdate`
	`componentDidUpdate`	更新后处理业务逻辑
错误处理	`componentDidCatch`	捕获子组件错误并展示降级 UI

三、核心生命周期函数及使用场景

1. 挂载阶段

constructor
作用：初始化 state、绑定方法 this。
注意：避免直接复制 props 到 state。
static getDerivedStateFromProps(props, state)
作用：根据 props 派生 state（如表单控件的默认值）。
注意：需谨慎使用，避免复杂逻辑（推荐使用受控组件替代）。
componentDidMount
作用：发送网络请求、操作 DOM、订阅事件。
示例：
```
componentDidMount() {
  fetchData().then(data => this.setState({ data }));
}
```

2. 更新阶段

shouldComponentUpdate(nextProps, nextState)
作用：通过比较新旧 props/state 决定是否重新渲染。
优化：使用 React.PureComponent 自动实现浅比较46。

getSnapshotBeforeUpdate(prevProps, prevState)
作用：记录 DOM 更新前的状态（如滚动位置）。
示例：

getSnapshotBeforeUpdate() {
  return this.list.scrollHeight;
}
componentDidUpdate(prevProps, prevState, snapshot) {
  this.list.scrollTop += this.list.scrollHeight - snapshot;
}

3. 卸载阶段

componentWillUnmount
作用：清理定时器、取消网络请求、移除事件监听。
示例：

componentWillUnmount() {
  clearInterval(this.timer);
  window.removeEventListener('resize', this.handleResize);
}

4. 错误处理

componentDidCatch(error, info)
作用：捕获子组件错误并更新状态展示错误 UI。
注意：仅捕获子组件错误，不可用于业务逻辑79。

四、废弃的生命周期函数及替代方案15

废弃函数	问题	替代方案
`componentWillMount`	副作用风险（如异步操作）	`constructor` + `componentDidMount`
`componentWillReceiveProps`	易引发无限渲染循环	`getDerivedStateFromProps`
`componentWillUpdate`	副作用和渲染不一致风险	`getSnapshotBeforeUpdate`

五、版本升级注意事项

React 17+ 完全移除了 componentWillMount、componentWillReceiveProps 和 componentWillUpdate，使用时会触发警告711。
函数组件与 Hooks：推荐使用 useEffect、useState 等 Hooks 替代类组件的生命周期逻辑26。

六、总结：生命周期使用场景

场景	推荐生命周期	说明
初始化数据请求	`componentDidMount`	避免阻塞渲染
根据 `props` 更新 `state`	`getDerivedStateFromProps`	需静态方法且无副作用
性能优化	`shouldComponentUpdate`	浅比较或手动控制渲染
DOM 更新前操作	`getSnapshotBeforeUpdate`	如记录滚动位置
错误处理	`componentDidCatch`	子组件错误捕获与降级 UI

通过合理使用生命周期函数，可以优化组件性能、管理副作用并提升代码可维护性。建议结合 React 官方文档和实际场景选择合适的方法911。