react新旧生命周期

新旧生命周期的变化主要表现在以下几个方面：

1. 旧的生命周期：
- componentWillMount：组件即将挂载到页面的时刻执行。
- componentDidMount：组件挂载完成之后执行。
- componentWillReceiveProps：组件props发生变化时执行。
- shouldComponentUpdate：组件是否需要更新时执行。
- componentWillUpdate：组件即将更新时执行。
- componentDidUpdate：组件更新完成之后执行。
- componentWillUnmount：组件即将被销毁时执行。

2. 新的生命周期：
- getDerivedStateFromProps：组件props发生变化时执行，可以在这里返回一个新的state。
- getSnapshotBeforeUpdate：组件即将更新时执行，可以在这里获取到更新前的页面快照。

需要注意的是，新的生命周期函数并不完全替换旧的生命周期函数，而是在旧的生命周期函数的基础上进行了补充和调整。旧的生命周期函数仍然可以使用，并且在React 17版本之前仍然被支持。

相关问题

react 新旧生命周期

React 16之前，React组件的生命周期分为三个阶段：挂载、更新和卸载。而从React 16开始，引入了新的生命周期方法，以便更好地处理组件的状态变化。

旧的生命周期方法包括：
- `componentWillMount`：在组件将要被挂载到DOM中之前调用。
- `componentDidMount`：在组件已经被挂载到DOM中后调用。
- `componentWillReceiveProps`：在组件接收到新的props之前调用。
- `shouldComponentUpdate`：在组件接收到新的props或state之前，确定是否重新渲染组件。
- `componentWillUpdate`：在组件更新之前调用。
- `componentDidUpdate`：在组件更新之后调用。
- `componentWillUnmount`：在组件将要被卸载之前调用。

新的生命周期方法包括：
- `getDerivedStateFromProps`：在组件接收到新的props之后，返回一个新的state对象。
- `getSnapshotBeforeUpdate`：在组件更新之前获取一个快照信息。

React官方推荐使用新的生命周期方法来替代旧的方法，因为旧的方法有一些问题以及潜在的性能问题。但是，为了向后兼容，旧的生命周期方法仍然可以使用。

需要注意的是，从React 17开始，部分旧的生命周期方法已经被废弃。具体来说，`componentWillMount`、`componentWillReceiveProps`和`componentWillUpdate`已经被废弃，并且在未来的版本中将会移除。因此，在新的React项目中，建议使用新的生命周期方法来替代这些废弃的方法。

react 的生命周期用法

React 的生命周期函数可以分为三个阶段：挂载阶段、更新阶段和卸载阶段。下面是常用的生命周期函数及其用法：

1. 挂载阶段：
- constructor：组件实例化时调用，用于初始化状态和绑定方法。
- render：必须实现的生命周期函数，返回 JSX 元素。
- componentDidMount：组件挂载后调用，可以进行异步操作、数据获取等。

2. 更新阶段：
- shouldComponentUpdate：决定组件是否需要重新渲染，默认返回 true。可以根据新旧 props 和 state 进行比较，优化性能。
- componentDidUpdate：组件更新后调用，可以进行 DOM 操作或网络请求等。

3. 卸载阶段：
- componentWillUnmount：组件卸载前调用，进行一些清理操作，如取消订阅、清除定时器等。

此外，React 还提供了一些其他的生命周期函数，如：
- static getDerivedStateFromProps：根据 props 更新 state。
- getSnapshotBeforeUpdate：在组件更新前获取 DOM 信息。

需要注意的是，React 16.3 版本开始，一些生命周期函数被标记为过时（deprecated），推荐使用新的生命周期函数替代。详细的生命周期函数用法可以参考 React 官方文档。