简述 React 的生命周期

发现宝藏

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。

React 生命周期是指一个组件从创建到销毁的过程，React 提供了一些生命周期方法，让开发者在特定的时刻执行代码。生命周期主要可以分为 类组件生命周期 和 函数组件生命周期 两类。这里主要讲解类组件的生命周期方法，函数组件的生命周期会通过 Hooks 实现。

类组件生命周期

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

1. 挂载阶段 (Mounting)

组件被创建并插入到 DOM 中的过程。

• constructor(props)
  组件实例化时调用，通常在这里初始化 state 和绑定事件处理函数。

  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  

• static getDerivedStateFromProps(nextProps, nextState)
  在每次渲染前调用，无论是组件的初始化渲染还是更新时都会调用。
  这个方法返回一个对象，React 会合并这个对象到当前组件的 state 中。
  该方法是静态的，不能访问组件实例（this）。

  static getDerivedStateFromProps(nextProps, nextState) {
    if (nextProps.value !== nextState.value) {
      return { value: nextProps.value };
    }
    return null;
  }
  

• render()
  该方法是类组件必须实现的方法，负责渲染 UI。它不应该修改 state 或执行副作用操作。

  render() {
    return <div>{this.state.count}</div>;
  }
  

• componentDidMount()
  组件挂载完成后调用，只会执行一次。通常用于发起异步请求或设置订阅等操作。

  componentDidMount() {
    console.log('Component mounted!');
  }
  

2. 更新阶段 (Updating)

组件在其 state 或 props 发生变化时，会重新渲染。

• static getDerivedStateFromProps(nextProps, nextState)
  同挂载阶段，组件每次更新时都会调用这个方法。

• shouldComponentUpdate(nextProps, nextState)
  在组件重新渲染之前调用，可以通过返回 true 或 false 来控制是否更新组件的渲染。如果返回 false，React 会跳过更新过程。

  shouldComponentUpdate(nextProps, nextState) {
    return nextState.count !== this.state.count;
  }
  

• render()
  与挂载阶段相同，组件每次更新时都会重新调用 render 方法。

• getSnapshotBeforeUpdate(prevProps, prevState)
  在渲染输出 (DOM 更新) 之前调用，可以获取一些渲染前的信息（比如滚动位置）。
  返回的值会作为 componentDidUpdate 方法的第三个参数。

  getSnapshotBeforeUpdate(prevProps, prevState) {
    return document.getElementById('myDiv').scrollTop;
  }
  

• componentDidUpdate(prevProps, prevState, snapshot)
  组件更新后被调用，常用于执行依赖于 DOM 更新的操作。snapshot 是 getSnapshotBeforeUpdate 返回的值。

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('Component updated!');
  }
  

3. 卸载阶段 (Unmounting)

组件从 DOM 中移除的阶段。

• componentWillUnmount()
  组件被卸载之前调用，通常在这里进行清理操作，如取消定时器、取消网络请求、移除事件监听等。

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

4. 错误处理 (Error Handling)

• static getDerivedStateFromError(error)
  当组件抛出错误时，会调用该方法，可以用于更新 state 以呈现备用 UI。

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  

• componentDidCatch(error, info)
  该方法用来捕获错误信息，可以用于日志记录。

  componentDidCatch(error, info) {
    console.error('Error caught:', error);
  }
  

函数组件生命周期 (React Hooks)

在 React 16.8 以后，函数组件可以通过 Hooks 来模拟类组件的生命周期。

1. useState — 管理组件的状态。
2. useEffect — 用于执行副作用，相当于类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 的合并。
3. useContext — 获取 context 数据。
4. useRef — 创建引用并在组件重新渲染时保持不变。

示例：使用 useEffect 代替生命周期方法

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  // 相当于 componentDidMount 和 componentDidUpdate
  useEffect(() => {
    console.log('Component rendered or updated');
    
    return () => {
      // 相当于 componentWillUnmount
      console.log('Cleanup before unmount');
    };
  }, [count]); // 依赖 count，当 count 改变时重新执行

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

总结

• 挂载阶段：constructor → getDerivedStateFromProps → render → componentDidMount
• 更新阶段：getDerivedStateFromProps → shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate
• 卸载阶段：componentWillUnmount
• 错误处理：getDerivedStateFromError → componentDidCatch

随着 React Hooks 的引入，函数组件可以通过 useEffect、useState 等 Hooks 管理生命周期，提供了更简洁和灵活的方式。