react_tutorial/react_lifecycle

React 生命周期是一个重要的概念，它描述了组件从创建到销毁的整个过程。下面是一些关于 React 组件生命周期的关键点：

生命周期方法

1. 挂载阶段

   • componentDidMount(): 组件已挂载到 DOM 上后调用。
   • getDerivedStateFromProps(props, state): 当 props 发生变化时，React 会调用此方法来更新 state。

2. 更新阶段

   • componentDidUpdate(prevProps, prevState): 组件更新后调用。
   • getSnapshotBeforeUpdate(prevProps, prevState): 在组件更新之前获取快照。

3. 卸载阶段

   • componentWillUnmount(): 组件即将卸载时调用。

4. 错误处理

   • componentDidCatch(error, info): 组件捕获到错误时调用。

示例

假设我们有一个简单的 React 组件，它会在挂载和更新时打印出当前的时间：

import React, { Component } from 'react';

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

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

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

export default Clock;

扩展阅读

想要更深入地了解 React 生命周期？请阅读我们的React 生命周期指南。

React Logo