React 中的组件生命周期和 state：赋予组件动力

前端

2023-10-27 01:31:40

React 的生命周期和 state：掌控组件的状态

序言

在上一篇文章中，我们通过调用 ReactDOM.render() 方法来更新元素。现在，让我们深入了解 React 的生命周期和 state，以赋予组件自我更新的能力。

生命周期：组件的出生、成长和消亡

组件的生命周期是一个关键概念，它定义了组件从创建到销毁的各个阶段。这些阶段提供了钩子函数，让我们在特定时刻执行特定的操作。让我们了解一下主要的生命周期方法：

componentDidMount()： 当组件首次挂载到 DOM 中时调用。适合执行需要 DOM 访问的初始化任务。
componentDidUpdate(prevProps, prevState)： 当组件更新其 props 或 state 时调用。我们可以在这里比较旧值和新值，并根据需要更新 DOM。
componentWillUnmount()： 当组件从 DOM 中卸载时调用。适合进行清理操作，例如移除事件监听器。

state：组件内部数据的源泉

state 是 React 组件中存储数据和控制数据变更的主要机制。它是组件内部数据的私有存储，只有该组件可以访问。要设置 state，我们使用 this.setState() 方法。

封装 Clock 组件：赋予其时间意识

现在，让我们封装 Clock 组件，使其每秒自动更新。

组件外观

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>现在的时间是：</h1>
        <h2>{this.state.date.toLocaleTimeString()}</h2>
      </div>
    );
  }
}

添加 state

为了让组件自我更新，我们需要添加一个 state 来跟踪当前时间。

class Clock extends React.Component {
  state = { date: new Date() };

  render() {
    // ...
  }
}

设置计时器

接下来，我们设置一个计时器，每秒更新一次 state。

class Clock extends React.Component {
  state = { date: new Date() };

  componentDidMount() {
    this.timerID = setInterval(
      () => this.setState({ date: new Date() }),
      1000
    );
  }

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

  render() {
    // ...
  }
}