16 生命周期之生命周期的介绍

在上一篇中，我们讨论了状态管理中的“状态提升”概念。当多个组件需要共享相同的状态时，可以将状态提升到它们的共同父组件。在 React 的组件模型中，除了 managing 状态外，了解组件的生命周期同样重要。组件的生命周期决定了组件的创建、更新和销毁的过程。

React 组件在其生命周期中的各个阶段都会经历不同的状态，这些状态的变化允许我们在特定的时间点执行代码。在本篇文章中，我们将探索 React 组件生命周期的概念，并为后续的常用生命周期方法做铺垫。

React 组件的生命周期

React 组件的生命周期主要可以分为三个阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。每个阶段都有对应的生命周期方法。

1. 挂载阶段：当组件被创建并插入到 DOM 中时会触发这一阶段。

   • constructor(props)：构造函数。在此方法中初始化状态，可以访问 props。
   • static getDerivedStateFromProps(nextProps, prevState)：在渲染前被调用。可以根据新的 props 更新 state。
   • render()：组件的必需方法，返回 JSX 以描述组件的 UI。
   • componentDidMount()：组件挂载后会立即执行此方法，适合进行网络请求或者 DOM 操作。

2. 更新阶段：当组件的 state 或 props 发生变化时，会触发更新阶段。

   • static getDerivedStateFromProps(nextProps, prevState)：此方法同样在更新阶段被调用。
   • shouldComponentUpdate(nextProps, nextState)：此方法用来优化性能，决定组件是否需要更新。
   • render()：同样返回新的 JSX。
   • getSnapshotBeforeUpdate(prevProps, prevState)：在 React 处理更新后，渲染输出前执行，通常用于获取某些信息（如滚动位置）。
   • componentDidUpdate(prevProps, prevState, snapshot)：组件更新后执行，可用来执行副作用操作。

3. 卸载阶段：当组件从 DOM 中移除时，会触发此阶段。

   • componentWillUnmount()：此方法用于清理定时器、取消网络请求等，防止内存泄露。

举个例子

现在，让我们通过一个简单的例子更好地理解组件的生命周期。

import React from 'react';

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

  componentDidMount() {
    this.intervalId = setInterval(() => {
      this.setState(prevState => ({ seconds: prevState.seconds + 1 }));
    }, 1000);
  }

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

  render() {
    return <h1>Seconds: {this.state.seconds}</h1>;
  }
}

在上面的代码中，Timer 组件展示了一个计时器功能。当组件挂载到 DOM 中时，componentDidMount() 被调用，设置了一个定时器来更新 seconds 状态。组件从 DOM 中卸载时，componentWillUnmount() 被调用，清除定时器以避免内存泄露。

结论

在本篇文章中，我们介绍了 React 组件的生命周期及其三个主要阶段。每一个生命周期阶段都有其对应的方法，帮助我们在组件的不同状态中执行特定的逻辑。这为我们后续了解各个生命周期方法的使用打下了基础。在下一篇文章中，我们将深入探讨常用的生命周期方法及其应用实例。通过理解并合理利用这些生命周期方法，我们能够更有效地管理 React 组件的状态和副作用，提升应用的性能与用户体验。

保持期待，下篇将对常用生命周期方法进行详细探讨！