React生命周期案例详解

React 组件的生命周期是指组件从创建、渲染、更新到卸载的整个过程。在 React 16 及之前的版本中，生命周期方法被分为几个不同的阶段：挂载（Mounting）、更新（Updating）、卸载（Unmounting）以及错误处理（Error Handling，React 16 引入）。但从 React 17 开始，一些生命周期方法被标记为不推荐使用（如 componentWillMount、componentWillReceiveProps、componentWillUpdate），并引入了新的钩子函数 getDerivedStateFromProps 和 componentDidMount（实际上 componentDidMount 在更早的版本就已存在，但这里强调其作为替代某些旧生命周期方法的作用）。在 React 18 中，又引入了新的并发特性，这可能会进一步影响生命周期的概念，但本文主要基于 React 16.x 和 17.x 进行讲解。
挂载（Mounting）
这是组件被插入到 DOM 中的过程。
constructor(props)
类组件的构造函数，初始化 state 或绑定事件处理函数时调用。
jsx
   class MyComponent extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
         count: 0
       };
     }
   }
   
static getDerivedStateFromProps(props, state)
当组件实例化后和接收新的 props 时将被调用。它应返回一个对象来更新 state，或者返回 null 来表明新的 props 不需要更新任何 state。
jsx
   class MyComponent extends React.Component {
     static getDerivedStateFromProps(props, state) {
       if (props.count !== state.count) {
         return { count: props.count };
       }
       return null;
     }
   }
   
render()
必须的方法，当组件需要更新时被调用，返回组件要渲染的内容。
jsx
   class MyComponent extends React.Component {
     render() {
       return <div>{this.state.count}</div>;
     }
   }
   
componentDidMount()
组件挂载到 DOM 之后调用。此时可以进行 API 调用、订阅等操作。
jsx
   class MyComponent extends React.Component {
     componentDidMount() {
       // 执行 API 调用等
     }
   }
   
更新（Updating）
组件的 props 或 state 发生变化时会进入更新过程。
static getDerivedStateFromProps(props, state)
组件更新时被调用，用于根据新的 props 来设置 state。
shouldComponentUpdate(nextProps, nextState)
决定组件是否应该更新。默认返回 true。返回 false 会阻止更新。
jsx
   class MyComponent extends React.Component {
     shouldComponentUpdate(nextProps, nextState) {
       if (nextProps.count === this.props.count) {
         return false;
       }
       return true;
     }
   }
   
render()
更新后，重新渲染组件。
getSnapshotBeforeUpdate(prevProps, prevState)
真实的 DOM 更新前调用。返回的值作为 componentDidUpdate 的第三个参数。
jsx
   class MyComponent extends React.Component {
     getSnapshotBeforeUpdate(prevProps, prevState) {
       // 例如，记录滚动位置等
       return null;
     }
   }
   
componentDidUpdate(prevProps, prevState, snapshot)
更新后立即调用。可以在这执行 DOM 操作或者执行更多的更新操作。
jsx
   class MyComponent extends React.Component {
     componentDidUpdate(prevProps, prevState, snapshot) {
       // 例如，处理 DOM 更新后的逻辑
     }
   }
   
卸载（Unmounting）
componentWillUnmount()
组件卸载和销毁之前调用。用于执行必要的清理操作，如取消网络请求、移除订阅等。
jsx
   class MyComponent extends React.Component {
     componentWillUnmount() {
       // 清理操作
     }
   }
   
错误处理（Error Handling）
React 16 引入了错误边界的概念，可用以下生命周期方法捕获子组件树的 JavaScript 错误。
static getDerivedStateFromError(error)
当子组件树中有组件抛出错误后，这个生命周期方法会被调用，返回值将作为 state。
componentDidCatch(error, info)
该生命周期方法会在后代组件抛出错误后被调用，可以用来记录错误信息。
错误边界组件示例：
jsx
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

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

  componentDidCatch(error, info) {
    // 可以将错误日志上报给你的服务器
    console.log(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}
使用错误边界：
jsx
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>
使用函数组件和 Hooks
在函数组件中，你可以使用 React Hooks 来模拟类组件中的生命周期方法。
useEffect 可以模拟 componentDidMount、componentDidUpdate 和 componentWillUnmount。
useState 和 useReducer 可以初始化 state，类似于 constructor。
useMemo 和 useCallback 可以优化性能，类似于 shouldComponentUpdate 的某些用例。
示例：
jsx
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // 类似于 componentDidMount 和 componentDidUpdate
    document.title = `You clicked ${count} times`;

    // 类似于 componentWillUnmount
    return () => {
      // 清理操作
    };
  }, [count]); // 依赖项数组，类似于 shouldComponentUpdate

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
以上是 React 生命周期的详细解释以及各个阶段对应的代码示例。希望这能帮助你更好地理解 React 组件的生命周期。