React v16.3 之后组件生命周期函数用法详尽指南

2023-10-07 10:47:18

React 生命周期函数的演进：理解新机制，提升组件质量

React 的生命周期函数 对于管理组件的行为至关重要，它允许我们根据组件的生命周期阶段执行特定任务。在 React v16.3 及更高版本中，生命周期函数发生了重大变化，这篇文章将全面阐述这些变化，包括新生命周期函数的用法和旧函数的替代方案。

新的生命周期函数

1. static getDerivedStateFromProps

这个函数在组件挂载前和每次组件更新前调用，它负责根据新的 props 计算和返回新的 state。它取代了 componentWillMount 和 componentWillReceiveProps。

static getDerivedStateFromProps(nextProps, prevState) {
  // 计算并返回新的 state
}

2. componentDidMount

这个函数在组件挂载后立即调用，它通常用于执行初始化操作，如获取数据或设置定时器。它没有直接替代品。

componentDidMount() {
  // 执行初始化操作
}

3. shouldComponentUpdate

这个函数在组件更新前调用，它可以返回一个布尔值来决定是否更新组件。它没有直接替代品。

shouldComponentUpdate(nextProps, nextState) {
  // 返回 true 或 false 以决定是否更新组件
}

4. getSnapshotBeforeUpdate

这个函数在组件更新前调用，它可以返回一个值，该值将在组件更新后传递给 componentDidUpdate 函数。它取代了 componentWillUpdate。

getSnapshotBeforeUpdate(prevProps, prevState) {
  // 返回一个值，该值将在组件更新后传递给 `componentDidUpdate`
}

5. componentDidUpdate

这个函数在组件更新后立即调用，它通常用于更新组件的 state 或执行其他操作。它没有直接替代品。

componentDidUpdate(prevProps, prevState, snapshot) {
  // 更新组件的 state 或执行其他操作
}

6. componentWillUnmount

这个函数在组件卸载前调用，它通常用于释放资源或执行清理操作。它没有直接替代品。

componentWillUnmount() {
  // 释放资源或执行清理操作
}

旧生命周期函数的替代方案

一些旧的生命周期函数在 React v16.3 中被弃用或不再推荐使用，它们包括：

componentWillMount ：被 static getDerivedStateFromProps 替代
componentWillReceiveProps ：被 static getDerivedStateFromProps 替代
componentWillUpdate ：被 getSnapshotBeforeUpdate 替代

新生命周期函数的用法示例

class MyComponent extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    // 计算并返回新的 state
  }

  componentDidMount() {
    // 执行初始化操作
  }

  shouldComponentUpdate(nextProps, nextState) {
    // 返回 true 或 false 以决定是否更新组件
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // 返回一个值，该值将在组件更新后传递给 `componentDidUpdate`
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // 更新组件的 state 或执行其他操作
  }

  componentWillUnmount() {
    // 释放资源或执行清理操作
  }

  render() {
    // 渲染组件
  }
}