reactjs - React 最佳实践中的错误处理

Question

在 React 中渲染组件(包含许多子组件)时，无论出于何种原因抛出 JS 错误，处理此问题的最佳方法是什么？当然，我可以捕获错误，但最终您想要渲染的东西可能无法渲染，因为缺少所需信息。您可以使用 propTypes 中的 .isRequired 提前进行验证，但这只是控制台在失败时发出警告。

Answer 1

React 16 引入了一个名为“错误边界”的新概念，用于处理 React 组件内部发生的错误，而不会破坏整个应用程序。

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

错误边界组件已通过新的生命周期方法componentDidCatch(error, info)成为可能。与其他生命周期方法不同，只有在渲染期间、生命周期方法或组件的任何子(包括所有孙)组件的构造函数中发生任何错误时，才会调用此方法。

在代码中，错误边界组件将如下所示。

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

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Error occurred!</h1>;
    }
    return this.props.children;
  }
}

我们可以将此错误边界组件用作代码中的普通组件。

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

现在，如果 MyComponent 在渲染期间、生命周期方法或构造过程中抛出任何 JavaScript 错误，Error Boundary 组件的 componentDidCatch 将触发并更改状态以显示 发生错误! 消息而不是损坏的 MyComponent。

这个新功能还带来了您在迁移到 React 16 之前想要了解的另一个重要含义。以前，如果发生错误，它会留下损坏的 UI，即使在您重新加载页面之前它通常不会按预期工作。但是，在 React 16 中，如果错误没有被任何错误边界处理，则会导致整个应用程序卸载。

因此，您适本地向应用程序添加错误边界将为您的用户带来更好的体验。因此，即使 UI 的某些区域已崩溃，用户也将能够与应用程序的一部分进行交互。

引用React official documentation on error boundaries或this official blog post了解更多信息。它们几乎涵盖了您需要了解的有关此新功能的所有内容。