React 组件生命周期

在 ReactJS 中，每个组件的创建过程都涉及各种生命周期方法。 这些生命周期方法被称为组件的生命周期。 这些生命周期方法并不非常复杂，而是在组件生命中的各个点被调用。 组件的生命周期分为 四个阶段。 它们是

1. 初始阶段
2. 挂载阶段
3. 更新阶段
4. 卸载阶段

每个阶段包含一些特定于该阶段的生命周期方法。 让我们逐一讨论这些阶段。

1. 初始阶段

这是 ReactJS 组件生命周期的诞生阶段。 在这里，组件开始它在 DOM 上的旅程。 在此阶段，组件包含默认的 Props 和初始 State。 这些默认属性在组件的构造函数中完成。 初始阶段只发生一次，包含以下方法。

• getDefaultProps()
  它用于指定 this.props 的默认值。 它在创建组件或从父组件传入任何 props 之前被调用。
• getInitialState()
  它用于指定 this.state 的默认值。 它在创建组件之前被调用。

2. 挂载阶段

在此阶段，组件的实例被创建并插入到 DOM 中。 它包含以下方法。

• componentWillMount()
  这会在组件被渲染到 DOM 之前立即被调用。 在您在此方法中调用 setState() 的情况下，组件将不会 重新渲染。
• componentDidMount()
  这会在组件被渲染并放置在 DOM 上之后立即被调用。 现在，您可以进行任何 DOM 查询操作。
• render()
  此方法在每个组件中定义。 它负责返回单个根 HTML 节点 元素。 如果您不想渲染任何内容，您可以返回一个 null 或 false 值。

3. 更新阶段

它是 react 组件生命周期的下一个阶段。 在这里，我们获得新的 Props 并更改 State。 此阶段还允许处理用户交互并提供与组件层次结构的通信。 此阶段的主要目的是确保组件显示其最新版本。 与诞生或死亡阶段不同，此阶段重复一次又一次。 此阶段包含以下方法。

• componentWillRecieveProps()
  当组件接收到新的 props 时，它会被调用。 如果您想更新状态以响应 prop 更改，您应该比较 this.props 和 nextProps 以使用 this.setState() 方法执行状态转换。
• shouldComponentUpdate()
  当组件决定对 DOM 进行任何更改/更新时，它会被调用。 它允许您控制组件的更新行为。 如果此方法返回 true，组件将更新。 否则，组件将跳过更新。
• componentWillUpdate()
  它在组件更新发生之前立即被调用。 在这里，您不能通过调用 this.setState() 方法来更改组件状态。 如果 shouldComponentUpdate() 返回 false，则不会调用它。
• render()
  它被调用以检查 this.props 和 this.state 并返回以下类型之一：React 元素、数组和片段、布尔值或 null、字符串和数字。 如果 shouldComponentUpdate() 返回 false，render() 中的代码将被再次调用，以确保组件正确显示自身。
• componentDidUpdate()
  它在组件更新发生后立即被调用。 在此方法中，您可以将您想要在更新发生后执行的任何代码放入其中。 此方法不适用于初始渲染。

4. 卸载阶段

它是 react 组件生命周期的最后阶段。 当组件实例被 销毁 并且从 DOM 卸载 时，它会被调用。 此阶段仅包含一种方法，如下所示。

• componentWillUnmount()
  此方法在组件被销毁并永久卸载之前立即被调用。 它执行任何必要的 清理 相关任务，例如使计时器无效、事件侦听器、取消网络请求或清理 DOM 元素。 如果组件实例被卸载，则无法再次挂载它。

示例

输出

当您单击 点击这里 按钮时，您会获得更新后的结果，如下面的屏幕所示。