React中的错误边界如何工作

React的错误边界是一种用于处理组件中错误的特殊组件。当在一个组件中发生错误时，错误边界可以捕获这些错误并展示备用UI，而不会导致整个应用崩溃。

错误边界通过两种生命周期方法来工作：componentDidCatch和static getDerivedStateFromError。

1. componentDidCatch(error, info)：当子组件抛出错误时，父组件中的componentDidCatch方法会被调用。这个方法接收两个参数：error表示发生的错误，info包含有关错误的详细信息。

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

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    // 可以将错误日志上传至服务器或其他处理
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

2. static getDerivedStateFromError(error)：该方法在渲染阶段调用，用于捕获组件树中的错误，并在state中设置错误信息。这个方法返回一个对象来更新state，如果返回null则表示不更新state。

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

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

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

使用错误边界可以保护您的应用免受组件中出现的错误的影响，并提供更好的用户体验。当错误发生时，错误边界会展示备用UI而不会导致整个应用崩溃。