React生命周期

目录

简介

概述

挂载阶段

constructor()

static getDerivedStateFromProps()

render()

componentDidMount()

更新阶段

static getDerivedStateFromProps()

shouldComponentUpdate()

render()

getSnapshotBeforeUpdate()

componentDidUpdate()

卸载阶段

componentWillUnmount()

错误处理阶段

static getDerivedStateFromError()

componentDidCatch()

---

简介

React 是一个用于构建用户界面的 JavaScript 库，其组件系统使得构建复杂的应用程序变得更加容易。 React 组件从创建到销毁会经历一系列的生命周期方法，了解这些方法对于优化组件性能和确保组件正确工作至关重要。 在这篇博客中，我们将深入探讨 React 的生命周期，从挂载到更新，再到卸载

概述

React 组件的生命周期可以分为三个主要阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。 此外，还有一个错误处理阶段。 每个阶段都有相应的生命周期方法，这些方法允许开发者在组件的不同阶段执行特定的操作。

• 挂载阶段：组件实例被创建并插入到 DOM 中。
• 更新阶段：组件的状态或属性发生变化，组件重新渲染。
• 卸载阶段：组件被从 DOM 中移除。
• 错误处理阶段：在渲染、生命周期方法或构造函数中抛出错误。

挂载阶段

 挂载阶段包括以下四个生命周期方法：

constructor()

constructor() 是类组件的构造函数，用于初始化状态和绑定方法

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

• 作用：初始化状态和方法绑定。
• 注意：如果不需要初始化状态或绑定方法，可以省略构造函数。

static getDerivedStateFromProps()

getDerivedStateFromProps() 是一个静态方法，在每次组件更新之前都会调用

static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.someValue !== prevState.someValue) {
    return { someValue: nextProps.someValue };
  }
  return null;
}

• 作用：根据 props 更新 state。
• 注意：返回一个对象来更新 state，如果不需要更新返回 null。

render()

render() 方法是类组件必须实现的，它返回要渲染的元素。

render() {
  return (
    <div>
      <h1>{this.state.count}</h1>
      <button onClick={this.increment}>Increment</button>
    </div>
  );
}

• 作用：渲染组件。
• 注意：这个方法必须是纯函数，不应该有副作用。

componentDidMount()

componentDidMount() 在组件挂载后立即调用

componentDidMount() {
  // 请求数据或设置定时器
  this.timerID = setInterval(() => this.tick(), 1000);
}

• 作用：执行副作用，如数据获取、订阅等。
• 注意：在这里设置的定时器或订阅需要在 中清除。componentWillUnmount()

更新阶段

更新阶段包括以下五个生命周期方法：

static getDerivedStateFromProps()

此方法与挂载阶段相同，更新阶段每次更新前也会调用

shouldComponentUpdate()

shouldComponentUpdate() 允许我们优化组件性能，通过控制组件是否需要重新渲染

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

• 作用：控制组件是否重新渲染。
• 注意：默认返回 true，如果返回 false，则阻止组件更新。

render()

此方法在更新阶段与挂载阶段相同，每次更新都会调用。

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate() 在更新发生前调用，它返回的值将作为 componentDidUpdate()的第三个参数

getSnapshotBeforeUpdate(prevProps, prevState) {
  if (prevProps.list.length < this.props.list.length) {
    return this.listRef.scrollHeight;
  }
  return null;
}

• 作用：捕获更新前的 DOM 状态。
• 注意：返回的值会传递给 。componentDidUpdate()

componentDidUpdate()

componentDidUpdate() 在组件更新后立即调用

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

• 作用：处理 DOM 更新后的逻辑。
• 注意：在这里可以访问更新前的 props 和 state 以及 的返回值。getSnapshotBeforeUpdate()

卸载阶段

卸载阶段包括一个生命周期方法：

componentWillUnmount()

componentWillUnmount() 在组件卸载和销毁之前立即调用

componentWillUnmount() {
  clearInterval(this.timerID);
}

• 作用：清理副作用，如取消订阅、清除定时器等。
• 注意：避免内存泄漏的重要方法。

错误处理阶段

错误处理阶段包括两个生命周期方法：

static getDerivedStateFromError()

getDerivedStateFromError() 在渲染过程中、生命周期方法或构造函数中抛出错误时调用

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

• 作用：更新 state 以显示错误界面。
• 注意：在这里可以捕获错误并更新 state。

componentDidCatch()

componentDidCatch() 在子组件抛出错误时调用

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