本文由 Luna 在众成翻译平台翻译
什么是错误处理?
错误处理指的是 React 组件中能捕获子组件树中的任何 Javascript 异常, 打印出来, 并且展示出备用 UI 的生命周期方法 从而避免了组件树崩溃它能在整个渲染及构建 dom 树的过程中捕获异常 -Dan Abramov
创建方法: 定义新的生命周期方法:
componentDidCatch(error, errorInfo)
componentDidCatch() 生命周期方法
componentDidCatch(error, errorInfo) {}
第一个参数指的是抛出的实际错误第二个参数是指错误信息, 它返回带有 componentStack 属性的对象, componentStack 属性包含组件的错误跟踪信息 componentDidCatch() 生命周期类似 Javascript 中的 catch {} 语句只不过是将子组件包裹在一个大的 try/catch 语句块中. 它不能捕获自身的错误, 而是将错误传给离它最近的异常上是不是听起来很熟悉?
小提示: JavaScript _catch {}_ 模块.
为什么需要 componentDidCatch()?
React 16 之前, 组件内部的错误经常会引出莫名奇妙的异常, 这些错误还不能在组件中去审查, OMG! 不堪回首啊!
React 16 的错误处理来拯救了!
优势
声明式 vs 命令式 React 的其中一个优势是它的声明式编程风格, 组件自身来声明哪些部分应该被渲染错误处理沿袭了 React 的声明式编码风格因此使用者不需要再使用命令式编程类似 try/catch 或 if/else 来避免渲染时候出现的 UI 错误
合乎常规无论组件中的错误隐藏的多深, 错误处理会将错误置于离它最近的异常上
可修复性. 使用者可以编写一个错误处理组件, 并在整个应用程序中重新使用它
一切皆组件
问题:
如何使用错误处理?
我在 Codepen 上写了关于 componentDidCatch() 生命周期的 demo, 请点击下面链接建议 fork 我, 把代码拷下来多敲, 在实践中发现问题
https://codepen.io/sgroff04/pen/dVbgJy/
什么时候使用错误处理?
在实践中, 大多数时候你会想要声明一个错误处理组件, 并在整个应用程序中使用它 - Dan Abramov
封装顶级路由组件还是封装需要传递参数的组件, 取决于具体场景, 选择最好的方案避免应用程序崩溃 错误处理鼓励在生产环境中的使用 componentDidCatch() 生命周期方法触发 JavaScript 的错误报告机制
了解更多请点击 React 16_错误处理 by Dan Abramov.
来源: https://sdk.cn/news/8073