数据API 产品矩阵 案例 关于
掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务

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

本文由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 的错误处理来拯救了!

优势

  1. 声明式 vs 命令式。React的其中一个优势是它的声明式编程风格,组件自身来声明哪些部分应该被渲染。错误处理沿袭了React的声明式编码风格。因此使用者不需要再使用命令式编程类似 try/catch或 if/else 来避免渲染时候出现的UI错误。

  2. 合乎常规。无论组件中的错误隐藏的多深,错误处理会将错误置于离它最近的异常上。

  3. 可修复性. 使用者可以编写一个错误处理组件,并在整个应用程序中重新使用它。

  4. 一切皆组件。

问题:

如何使用错误处理?

我在Codepen上写了关于 componentDidCatch() 生命周期的demo,请点击下面链接。建议 fork我,把代码拷下来多敲,在实践中发现问题。

https://codepen.io/sgroff04/pen/dVbgJy/

什么时候使用错误处理?

在实践中,大多数时候你会想要声明一个错误处理组件,并在整个应用程序中使用它。-Dan Abramov

封装顶级路由组件还是封装需要传递参数的组件,取决于具体场景,选择最好的方案避免应用程序崩溃。 错误处理鼓励在生产环境中的使用componentDidCatch()生命周期方法触发JavaScript的错误报告机制

了解更多请点击 React 16_错误处理 by Dan Abramov.

译者推荐:在 React 16 中使用高阶组件来捕获异常https://www.jianshu.com/p/cf85a4317f36

原文来自:众成翻译

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
两分钟学会 React 16 componentDidCatch 生命周期方法
发布: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 的错误处理来拯救了!

优势

  1. 声明式 vs 命令式。React的其中一个优势是它的声明式编程风格,组件自身来声明哪些部分应该被渲染。错误处理沿袭了React的声明式编码风格。因此使用者不需要再使用命令式编程类似 try/catch或 if/else 来避免渲染时候出现的UI错误。

  2. 合乎常规。无论组件中的错误隐藏的多深,错误处理会将错误置于离它最近的异常上。

  3. 可修复性. 使用者可以编写一个错误处理组件,并在整个应用程序中重新使用它。

  4. 一切皆组件。

问题:

如何使用错误处理?

我在Codepen上写了关于 componentDidCatch() 生命周期的demo,请点击下面链接。建议 fork我,把代码拷下来多敲,在实践中发现问题。

https://codepen.io/sgroff04/pen/dVbgJy/

什么时候使用错误处理?

在实践中,大多数时候你会想要声明一个错误处理组件,并在整个应用程序中使用它。-Dan Abramov

封装顶级路由组件还是封装需要传递参数的组件,取决于具体场景,选择最好的方案避免应用程序崩溃。 错误处理鼓励在生产环境中的使用componentDidCatch()生命周期方法触发JavaScript的错误报告机制

了解更多请点击 React 16_错误处理 by Dan Abramov.

译者推荐:在 React 16 中使用高阶组件来捕获异常https://www.jianshu.com/p/cf85a4317f36

原文来自:众成翻译

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

选择想要的接口, 看看能免费获取多少次调用 选择(单选)或填写想要的接口
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
短信API服务
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
  • 确定
选择您的身份
请选择寻找接口的目的
预计每月调用量
请选择预计每月调用量
产品研发的阶段
请选择产品研发的阶段
×

前往领取
电话 0512-88869195
×
企业用户认证,
可获得1000次免费调用
注册登录 > 企业账户认证 > 领取接口包
企业用户认证领取接口包 立即领取
× 企业用户认证,
可获得1000次免费调用,立即领取>
数 据 驱 动 未 来
Data Drives The Future