什么是错误边界
错误边界是一种 React 组件，它可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法以及整个组件树的构造函数中捕获错误。
使用错误边界
错误边界只能捕获发生在其子组件树中的错误。如果错误边界在其自身内部抛出了错误，则无法捕获该错误，也不能将其显示为备用 UI。
错误边界的工作方式类似于 try/catch 语句，但它们捕获的是渲染期间的错误，而不是像 try/catch 那样捕获运行时错误。
错误边界必须是类组件，函数组件不能成为错误边界。错误边界可以定义一个或多个以下生命周期方法来处理子组件抛出的错误：
static getDerivedStateFromError(error)componentDidCatch(error, info)
getDerivedStateFromError() 方法会在后代组件抛出错误后被调用。它可以让 React 的后续渲染使用来自错误的 fallback UI。此方法应返回一个对象以更新状态，或者返回 null 以不更新任何状态。
componentDidCatch(error, info) 方法在后代组件抛出错误后被调用。它接收两个参数：一个是错误对象，另一个是包含有关错误信息的对象。这个生命周期方法类似于 JavaScript 的 catch {} 块，但它只在 class 组件中可用。
创建错误边界组件
为了创建一个错误边界组件，你需要定义一个继承自 React.Component 的类组件，并实现上述的生命周期方法。
// www.javascriptcn.com code example
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;
}
}使用错误边界组件
要使用错误边界，只需将你的组件树包裹在错误边界组件中即可。
<ErrorBoundary> <MyWidget /> </ErrorBoundary>
在这个例子中，如果 <MyWidget /> 抛出了一个错误，错误边界将会捕获到该错误，并且渲染备用 UI <h1>Something went wrong.</h1>。同时，错误和错误信息会被传递给 componentDidCatch 生命周期方法，以便进行进一步的处理。
注意事项
- 错误边界仅捕获发生在其子组件树中的错误。
- 错误边界只能作为类组件使用，因为它们需要实现特定的生命周期方法。
- 如果错误边界在其自身内部抛出了错误，则无法捕获该错误，也不能将其显示为备用 UI。
- 错误边界可以定义
getDerivedStateFromError()和componentDidCatch()来处理错误。 - 错误边界可以帮助你更好地管理用户界面的稳定性，尤其是在处理异步操作或第三方库时。
通过以上内容，我们了解了如何使用错误边界来提高应用的健壮性和用户体验。错误边界是 React 中一个非常有用的特性，它使得我们能够在生产环境中更好地处理未预见的错误，从而避免页面完全崩溃。