React（精读官方文档）-高级指引 - 错误边界
错误边界（Error Boundaries）
概述
- 部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界。
- 是React组件,可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。
- class组件中才可以使用
- 错误边界仅可以捕获其子组件的错误
错误边界无法捕获以下场景中的错误：
- 事件处理
- 异步代码
- 服务端渲染
- 它自身抛出来的错误（并非它的子组件）
渲染备用UI ： static getDerivedStateFromError()
- 在class组件中使用 static getDerivedStateFromError() 可以渲染备用 UI
static getDerivedStateFromError(error){// 更新 state 使下一次渲染能够显示降级后的 UIreturn { hasError: true }
}
打印错误信息： componentDidCatch()
- 在class组件中使用 cpmponentDidCatch(err,errorInfo) 可以打印错误信息
- err：错误信息； errorInfo：它存储哪个组件引发了此错误的componentStack跟踪
componentDidCatch(error,errorInfo){// 你同样可以将错误日志上报给服务器logErrorToMyService(error, errorInfo)
}
打印错误信息并渲染备用UI
class ErrorBoundary extends React.Component {constructor(props){super(props)this.state = { hasError: false} //是否报错}static getDeriveStateFromError(error){// 更新 state 使下一次渲染能够显示降级后的 UIreturn { 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>//项目中可以用于包裹在路由外面<ErrorBoundary><Suspense fallback={<div >Loading...</div>}>...<MyWidget /></Suspense>
</ErrorBoundary>
错误边界的工作方式类似于 JavaScript 的 catch {}，不同的地方在于错误边界只针对 React 的class 组件。
错误边界应该放置在哪？
- 可以选在最顶层的路由组件并为用户展示一个错误信息
未捕获错误（Uncaught Errors）的新行为
- 自 React 16 起，任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！