React中的生命周期用法详解-牛翰网

React中的生命周期

在 React 中，组件的生命周期是指从组件创建到销毁的整个过程。

React 的生命周期可以分为三大类：挂载（Mounting）、更新（Updating）、卸载（Unmounting）。

这些生命周期方法提供了在组件的不同阶段执行代码的机会。

1. 挂载阶段（Mounting）

当组件被创建并插入 DOM 时，会依次触发以下生命周期方法：

constructor(props)

构造函数，在组件实例化时调用。用于初始化组件的 state 或绑定事件处理函数。

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

static getDerivedStateFromProps(nextProps, nextState)

在每次渲染之前调用，无论是初始化渲染还是后续更新。此方法返回一个对象来更新 state，或者返回 null 表示不更新 state。

static getDerivedStateFromProps(nextProps, nextState) {
  if (nextProps.value !== nextState.value) {
    return { derivedValue: nextProps.value };
  }
  return null;
}

render()

这个方法是必需的，它返回组件的 JSX 结构，用于渲染 UI。

componentDidMount()

在组件挂载后调用。通常用于进行网络请求或其他需要在 DOM 更新后执行的操作。

componentDidMount() {
  console.log("Component mounted");
}

2. 更新阶段（Updating）

当组件的 state 或 props 发生变化时，组件会进入更新阶段。更新阶段包括以下生命周期方法：

static getDerivedStateFromProps(nextProps, nextState)

更新阶段同样会调用此方法。它在每次接收到新的 props 时调用，返回一个对象来更新 state 或返回 null。

shouldComponentUpdate(nextProps, nextState)

在组件更新之前调用，返回 true 或 false，用于优化性能，避免不必要的渲染。

shouldComponentUpdate(nextProps, nextState) {
  return nextState.count !== this.state.count;
}

render()

更新阶段与挂载阶段一样，render() 方法会被调用，返回新的 UI。

getSnapshotBeforeUpdate(prevProps, prevState)

在 React 更新 DOM 之前调用，返回一个值作为 componentDidUpdate 方法的第三个参数，通常用于获取一些 DOM 信息（如滚动位置）。

getSnapshotBeforeUpdate(prevProps, prevState) {
  return prevState.scrollPosition;
}

componentDidUpdate(prevProps, prevState, snapshot)

在组件更新后调用。可以通过比较前后 props 或 state，来执行额外的操作。

componentDidUpdate(prevProps, prevState, snapshot) {
  if (this.state.count !== prevState.count) {
    console.log("Count changed");
  }
}

3. 卸载阶段（Unmounting）

当组件从 DOM 中卸载时，会调用以下生命周期方法：

componentWillUnmount()

在组件卸载之前调用，用于清理定时器、取消网络请求或解绑事件监听等。

componentWillUnmount() {
  console.log("Component will unmount");
}

4. 错误处理阶段（Error Handling）（React 16+ 新增）

React 16 引入了错误边界机制，用于捕获渲染过程中的 JavaScript 错误，并渲染一个备用的 UI。

static getDerivedStateFromError(error)

捕获子组件的错误，并更新 state 以显示备用 UI。

static getDerivedStateFromError(error) {
  return { hasError: true };
}

componentDidCatch(error, info)

捕获并处理错误，通常用于日志记录或其他后续操作。

componentDidCatch(error, info) {
  logErrorToMyService(error, info);
}

总结

React 组件生命周期方法主要分为三个阶段：挂载（Mounting）、更新（Updating）、卸载（Unmounting），以及错误处理阶段。

它们提供了不同的时机让开发者在组件的生命周期内执行特定操作，比如初始化状态、更新 UI、执行副作用操作等。

常见生命周期方法：

阶段	方法
挂载	constructor, getDerivedStateFromProps, render, componentDidMount
更新	getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate
卸载	componentWillUnmount
错误处理	getDerivedStateFromError, componentDidCatch