React用错误边界来捕获和处理异常错误
一、解决什么问题？
UI 中 JavaScript 错误不应该导致整个应用崩溃，错误边界就是解决方案(React 16 增加的功能)。
二、有哪些特性？
1、定义
- 可捕获子组件 JavaScript 错误，打印错误并展示备用UI的clas组件。
2、无法捕获的错误：
- 事件处理
- 异步代码（例如
setTimeout或requestAnimationFrame回调函数） - 服务端渲染
- 它自身抛出来的错误（并非它的子组件）
3、怎么写？
错误边界是包含下面任意一个或两个方法 的class组件：
-
static getDerivedStateFromError()：渲染备用 UI -
componentDidCatch()：打印错误信息
// 错误边界 实例
class ErrorBoundary extends React.Component {constructor(props) {super(props);this.state = { hasError: false };}static getDerivedStateFromError(error) {// 更新 state 使下一次渲染能够显示降级后的 UIreturn { hasError: true };}componentDidCatch(error, errorInfo) {// 你同样可以将错误日志上报给服务器logErrorToMyService(error, errorInfo);}render() {if (this.state.hasError) {// 你可以自定义降级后的 UI 并渲染return Something went wrong.
;}return this.props.children;}
}
// 使用本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！