当前位置：首页 > article >正文

React 生命周期函数详解

article 2025/2/10 5:42:07

React 组件在其生命周期中有多个阶段，每个阶段都有特定的生命周期函数（Lifecycle Methods）。这些函数允许你在组件的不同阶段执行特定的操作。以下是 React 组件生命周期的主要阶段及其对应的生命周期函数，并结合了 React 16.3+ 的变化。

一、挂载阶段（Mounting）

在组件首次被挂载到 DOM 时会触发的一系列生命周期函数。

constructor(props)：

初始化组件的状态和绑定事件处理器。
注意：尽量避免在此进行复杂的计算或副作用操作。

constructor(props) {
  super(props);
  this.state = { count: 0 };
  this.handleClick = this.handleClick.bind(this); // 绑定事件处理器
}

static getDerivedStateFromProps(nextProps, prevState)：
- 在组件挂载和更新之前调用，用于根据新的 props 更新 state。
- 返回一个对象来更新 state，或者返回 null 表示不需要更新。
```
static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.value !== prevState.value) {
    return { value: nextProps.value };
  }
  return null;
}
```
render()：
- 必须实现的方法，用于渲染组件的虚拟 DOM。
- 不应该在这里进行副作用操作（如 API 调用、DOM 操作等）。
```
render() {
  return <div>{this.state.count}</div>;
}
```
componentDidMount()：
- 组件挂载完成后调用，通常用于发起网络请求、订阅事件等副作用操作。
```
componentDidMount() {
  fetch('/api/data').then(response => this.setState({ data: response.data }));
}
```

二、更新阶段（Updating）

当组件的 props 或 state 发生变化时，会触发一系列更新阶段的生命周期函数。

static getDerivedStateFromProps(nextProps, prevState)：
- 同挂载阶段的 getDerivedStateFromProps，用于根据新的 props 更新 state。
shouldComponentUpdate(nextProps, nextState)：
- 判断组件是否需要重新渲染。返回 false 可以阻止不必要的重新渲染，从而优化性能。
```
shouldComponentUpdate(nextProps, nextState) {
  return nextState.count !== this.state.count;
}
```
render()：
- 同挂载阶段的 render() 方法，用于渲染组件的虚拟 DOM。
getSnapshotBeforeUpdate(prevProps, prevState)：
- 在最新的渲染输出提交给 DOM 之前调用，可以捕获一些 DOM 信息（如滚动位置），以便在 componentDidUpdate 中使用。
```
getSnapshotBeforeUpdate(prevProps, prevState) {
  if (prevProps.items.length < this.props.items.length) {
    return this.listRef.scrollHeight;
  }
  return null;
}
```

componentDidUpdate(prevProps, prevState, snapshot)：

组件更新完成后调用，可以在此进行副作用操作（如网络请求、DOM 操作等）。

componentDidUpdate(prevProps, prevState, snapshot) {
  if (snapshot !== null) {
    this.listRef.scrollTop = this.listRef.scrollHeight - snapshot;
  }
}

三、卸载阶段（Unmounting）

当组件从 DOM 中卸载时会触发的生命周期函数。

componentWillUnmount()：
- 组件卸载和销毁之前立刻调用，通常用于清理工作，如取消网络请求、清除定时器、移除事件监听器等。
```
componentWillUnmount() {
  clearInterval(this.timerID);
  this.subscription.remove();
}
```

四、错误处理阶段（Error Handling）

当组件抛出错误时会触发的生命周期函数。

static getDerivedStateFromError(error)：
- 当子组件抛出错误时调用，用于更新 state 以便显示错误 UI。
```
static getDerivedStateFromError(error) {
  return { hasError: true };
}
```
componentDidCatch(error, info)：
- 当子组件抛出错误时调用，通常用于记录错误日志或上报错误。
```
componentDidCatch(error, info) {
  logErrorToService(error, info);
}
```

五、React 16.3+ 生命周期变化

随着 React 16.3+ 的发布，部分生命周期函数被废弃或新增了一些新的生命周期函数：

废弃的生命周期：
- componentWillMount（建议使用 componentDidMount）
- componentWillReceiveProps（建议使用 static getDerivedStateFromProps）
- componentWillUpdate（建议使用 getSnapshotBeforeUpdate）
新增的生命周期：
- getDerivedStateFromProps：用于在挂载和更新前根据 props 更新 state。
- getSnapshotBeforeUpdate：在最新的渲染输出提交给 DOM 之前调用，捕获一些 DOM 信息。

钩子函数（Hooks）

随着 React Hooks 的引入，许多类组件的生命周期方法可以通过钩子函数来实现：

useEffect：

相当于 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

useEffect(() => {
  // 类似 componentDidMount 和 componentDidUpdate
  fetchData().then(data => setState({ data }));

  // 清理函数，类似 componentWillUnmount
  return () => {
    cleanup();
  };
}, [props.userID]); // 依赖项数组