react生命周期阮一峰 react生命周期阮一峰

React组件的生命周期函数主要包括挂载、更新和卸载三个周期。

1. 挂载（Mounting）

constructor(props): 在组件实例被创建并初始化状态之前调用。这是设置初始状态的合适时机。
static getDerivedStateFromProps(nextProps, prevState): 在render之前调用，用于根据新的props更新state。这是一个静态方法，不能访问组件实例。
render(): 必需的方法。组件的UI逻辑在这里定义，返回JSX或其他可渲染的元素。
componentDidMount(): 在组件挂载后立即调用，此时DOM元素已经创建，可以在这里进行DOM操作、网络请求等。

2. 更新（Updating）

static getDerivedStateFromProps(nextProps, prevState): 在组件接收到新的props或state被更新时调用，用于更新state。
shouldComponentUpdate(nextProps, nextState): 在接收到新的props或state之前调用，用于决定是否重新渲染组件。返回true则继续渲染，返回false则跳过渲染过程。
render(): 更新过程中重新渲染组件。
getSnapshotBeforeUpdate(prevProps, prevState): 在最近一次渲染输出（提交到DOM节点）之前调用。它使得组件能在DOM将要被改变之前捕获一些信息（例如，滚动位置）。这个生命周期返回的任何值都会作为componentDidUpdate的第三个参数。
componentDidUpdate(prevProps, prevState, snapshot): 在更新后立即调用，可以在这里操作DOM或执行依赖于DOM的操作。

3. 卸载（Unmounting）

注意事项：

在render方法中，不能与浏览器进行交互。如果需要与浏览器交互，应在componentDidMount或其他生命周期函数中执行。
React 16之后，componentWillMount、componentWillReceiveProps和componentWillUpdate这些生命周期方法被标记为不安全，建议避免使用，转而使用static getDerivedStateFromProps和getSnapshotBeforeUpdate。

React的生命周期是组件从创建到销毁所经历的一系列过程，理解并合理使用这些生命周期函数，有助于更好地控制组件的行为和优化性能。

热门标签