static getDerivedStateFromError(error)

getDerivedStateFromError 是 React 类组件中的一个静态生命周期方法，它在后代组件抛出错误后被调用。这个方法允许你在捕获到错误时更新组件的状态，从而可以在用户界面上显示回退的 UI 或者记录错误信息。它是 React 错误边界（error boundaries）机制的一部分，用于处理渲染期间、生命周期方法和整个组件树中的构造函数中发生的 JavaScript 错误。

方法签名

static getDerivedStateFromError(error)

• error：捕获到的错误对象。

这个方法应该返回一个对象来更新状态，如果不需要更新状态，则返回 null。

使用场景

显示回退 UI

当你想要在应用程序的某个部分发生错误时展示一个友好的错误消息或回退界面，可以使用 getDerivedStateFromError 来设置组件的状态，并在 render 方法中根据状态的变化展示不同的内容。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 以便下一次渲染可以显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你可以将错误报告给服务器
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

在这个例子中，当子组件抛出错误时，getDerivedStateFromError 会将 hasError 状态设置为 true，然后 render 方法会根据这个状态显示一条简单的错误消息。

记录错误信息

除了更新状态以改变 UI 外，你还可以利用 componentDidCatch 方法来记录错误信息，比如发送错误日志到你的服务器或者使用第三方服务进行错误跟踪。

componentDidCatch(error, errorInfo) {
  // 将错误日志发送到服务器或其他地方
  reportError(error, errorInfo);
}

注意事项

1. 仅适用于类组件：getDerivedStateFromError 只能在类组件中使用。如果你使用的是函数组件，请考虑使用 React.ErrorBoundary 组件或者自定义 Hook 来实现类似的功能。
2. 不能捕获事件处理器中的错误：错误边界不会捕获事件处理器、异步代码（如 setTimeout 或 requestAnimationFrame）、服务器端渲染过程中发生的错误，以及原生浏览器事件处理程序中的错误。
3. 避免在错误边界内再次引发错误：确保在 getDerivedStateFromError 和 componentDidCatch 中处理好所有可能的情况，不要再次引发新的错误，否则会导致难以调试的问题。
4. 幂等性：尽量使 getDerivedStateFromError 的操作是幂等的，即多次调用不会产生不同的结果。这有助于应对严格模式下的双重调用情况。

函数组件中的替代方案

对于函数组件，React 提供了内置的 ErrorBoundary 组件，也可以通过创建高阶组件（Higher Order Component, HOC）或自定义 Hook 来实现类似的错误边界功能。

使用 React.ErrorBoundary

import { ErrorBoundary } from "react";

function MyComponent() {
  return <ErrorBoundary>{/* 子组件 */}</ErrorBoundary>;
}

创建自定义 Hook

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

function useErrorHandler(defaultFallbackUI) {
  const [hasError, setHasError] = useState(false);

  useEffect(() => {
    const handleError = (error, errorInfo) => {
      console.error("Error caught by hook:", error, errorInfo);
      setHasError(true);
    };

    window.addEventListener("error", handleError);
    window.addEventListener("unhandledrejection", handleError);

    return () => {
      window.removeEventListener("error", handleError);
      window.removeEventListener("unhandledrejection", handleError);
    };
  }, []);

  if (hasError) {
    return defaultFallbackUI;
  }

  return null;
}

function MyComponent() {
  const errorUI = useErrorHandler(<h1>Something went wrong.</h1>);

  if (errorUI) {
    return errorUI;
  }

  // 正常渲染逻辑...
}

总结

通过理解 getDerivedStateFromError 的工作原理及其最佳实践，你可以更好地决定何时以及如何使用它来管理组件的错误边界逻辑。确保在应用程序中正确地处理错误是构建健壮和用户友好型 React 应用程序的重要部分。