React 生命周期：事物从创建到销毁的过程

2024-01-15 22:06:20

前言：生命周期概念

在软件工程中，生命周期指的是事物从创建到销毁的完整过程。React 生命周期也是一个抽象的概念，它了React组件从被渲染到被销毁的整个历程。通过理解React 生命周期，开发者可以深入了解组件是如何被创建、更新和销毁的，从而编写出更健壮、更可维护的React应用程序。

React生命周期的阶段

React生命周期可以划分为以下阶段：

装载阶段 (Mount) ：组件首次在DOM树中被渲染的过程。
更新阶段 (Update) ：组件由于props或state的变化而重新渲染的过程。
卸载阶段 (Unmount) ：组件从DOM树中被移除的过程。

装载阶段

在装载阶段，React会调用以下生命周期方法：

constructor() ：组件的构造函数，用于初始化组件的state和props。
componentWillMount() ：在组件被装载到DOM树之前调用，用于执行任何必要的初始化任务。
render() ：渲染组件的UI。
componentDidMount() ：在组件被装载到DOM树之后调用，用于执行任何与DOM相关的操作，例如获取DOM元素的引用。

更新阶段

在更新阶段，React会调用以下生命周期方法：

componentWillReceiveProps(nextProps) ：在组件接收到新的props之前调用，用于比较新的props和旧的props，并确定组件是否需要更新。
shouldComponentUpdate(nextProps, nextState) ：在组件接收到新的props或state之前调用，用于决定组件是否需要更新。返回true表示需要更新，返回false表示不需要更新。
componentWillUpdate(nextProps, nextState) ：在组件更新之前调用，用于执行任何必要的更新准备工作。
render() ：渲染组件的UI。
componentDidUpdate(prevProps, prevState) ：在组件更新之后调用，用于执行任何与DOM相关的更新操作，例如更新DOM元素的引用。

卸载阶段

在卸载阶段，React会调用以下生命周期方法：

componentWillUnmount() ：在组件从DOM树中被移除之前调用，用于执行任何必要的清理工作，例如移除事件监听器。

实践：理解生命周期方法

为了更好地理解React生命周期方法，让我们举一个简单的例子。考虑一个计数器组件，它有一个增加按钮和一个减少按钮：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  decrement = () => {
    this.setState({ count: this.state.count - 1 });
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    );
  }
}