React 组件生命周期

React 组件的生命周期是理解 React 应用如何渲染和更新的重要组成部分。下面将介绍 React 组件的生命周期方法以及它们的使用场景。

生命周期方法

React 组件的生命周期方法如下：

• componentDidMount(): 组件挂载到 DOM 后调用。
• componentDidUpdate(): 组件更新后调用。
• componentWillUnmount(): 组件卸载前调用。
• componentWillMount(): 组件挂载前调用（已废弃，不建议使用）。
• componentWillUpdate(): 组件更新前调用（已废弃，不建议使用）。
• shouldComponentUpdate(): 组件更新前判断是否需要更新。

使用场景

• componentDidMount(): 可以在这里进行 DOM 操作，比如获取 DOM 元素、发起网络请求等。
• componentDidUpdate(): 可以在这里处理数据更新后的操作，比如根据新的数据更新其他组件。
• componentWillUnmount(): 可以在这里进行一些清理工作，比如取消订阅、清除定时器等。

示例

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    fetch('/api/data')
      .then((response) => response.json())
      .then((data) => {
        this.setState({ data });
      });
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.data !== prevState.data) {
      console.log('Data updated:', this.state.data);
    }
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {data ? <p>Data: {data}</p> : <p>Loading...</p>}
      </div>
    );
  }
}

扩展阅读

更多关于 React 组件生命周期的内容，请参考 React 官方文档。

[center] [center]