两分钟学会 React 16 componentDidCatch 生命周期方法

来源： SDK.cn 类型：技术文章发布：2018-02-05 11:59:28

本文由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错误。
合乎常规。无论组件中的错误隐藏的多深，错误处理会将错误置于离它最近的异常上。
可修复性. 使用者可以编写一个错误处理组件，并在整个应用程序中重新使用它。
一切皆组件。