为什么 React .js 中需要 ErrorBoundary ?

Question

它处理什么样的错误，是否有任何真实世界的场景？

我阅读了文档，但它没有给出一个很好的例子。

文档还提到它可以处理 UI 错误，但 UI 错误可以在开发时解决，那么为什么我们需要"错误边界"。

Answer 1

错误边界就像反应组件的try-catch块。它们允许您优雅地捕获和处理反应组件中的意外错误，例如，向用户显示一条消息，指出出了问题。

如果不处理这些错误，将导致应用崩溃。错误边界允许你捕获这些错误，并以防止应用崩溃的方式处理它们，并向用户提供用户友好的消息，指示出现问题。

请记住，错误边界不处理以下错误：

• 事件处理程序
• 异步代码(例如 setTimeout 或 requestAnimationFrame 回调(
• 服务器端渲染
• 在错误边界本身(而不是其子边界(中引发的错误

这是一篇很好的文章，解释了错误边界

Answer 2

但UI错误可以在开发时解决

UI错误无法在开发时解决，尽管像Flow和Typescript这样的键入确实有很大帮助，但数据服务器通常可能会出现运行时错误。

---

用于捕获运行时错误和显示友好 UI 的错误边界。

请参阅编译时与运行时错误。

ErrorBoundary是一个类组件，它实现getDerivedStateFromError和componentDidCatch，以便在回退 UI 上添加额外的呈现。

目前，它只能使用类组件实现，通常它是应用程序中唯一的类组件，其余的是带有钩子的函数组件。

在实际用例中，您可以使用一些<ErrorBoundary/>组件包装应用程序并呈现所需的 UI。

class ErrorBoundary extends React.Component {
state = {
hasError: false,
error: { message: '', stack: '' },
info: { componentStack: '' }
};
static getDerivedStateFromError = error => {
return { hasError: true };
};
componentDidCatch = (error, info) => {
this.setState({ error, info });
};
render() {
const { hasError, error, info } = this.state;
const { children } = this.props;
return hasError ? <ErrorComponent/> : children;
}
}
<ErrorBoundary>
<App/>
</ErrorBoundary>