详解React 16 中的异常处理


Posted in Javascript onJuly 28, 2017

详解React 16 中的异常处理

异常处理

在 React 15.x 及之前的版本中,组件内的异常有可能会影响到 React 的内部状态,进而导致下一轮渲染时出现未知错误。这些组件内的异常往往也是由应用代码本身抛出,在之前版本的 React 更多的是交托给了开发者处理,而没有提供较好地组件内优雅处理这些异常的方式。在 React 16.x 版本中,引入了所谓 Error Boundary 的概念,从而保证了发生在 UI 层的错误不会连锁导致整个应用程序崩溃;未被任何异常边界捕获的异常可能会导致整个 React 组件树被卸载。所谓的异常边界即指某个能够捕获它的子元素(包括嵌套子元素等)抛出的异常,并且根据用户配置进行优雅降级地显示而不是导致整个组件树崩溃。异常边界能够捕获渲染函数、生命周期回调以及整个组件树的构造函数中抛出的异常。

我们可以通过为某个组件添加新的 componentDidCatch(error, info) 生命周期回调来使其变为异常边界:

class ErrorBoundary extends React.Component {
 constructor(props) {
super(props);
this.state = { hasError: false };
 }

 componentDidCatch(error, info) {
  // Display fallback UI
this.setState({ hasError: true });
  // You can also log the error to an error reporting service
  logErrorToMyService(error, info);
 }

 render() {
if (this.state.hasError) {
   // You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
  }
return this.props.children;
 }
}

然后我们就可以如常使用该组件:

<ErrorBoundary>
<MyWidget />
</ErrorBoundary>

componentDidCatch() 方法就好像针对组件的 catch {} 代码块;不过 JavaScript 中的 try/catch 模式更多的是面向命令式代码,而 React 组件本身是声明式模式,因此更适合采用指定渲染对象的模式。需要注意的是仅有类组件可以成为异常边界,在真实的应与开发中我们往往会声明单个异常边界然后在所有可能抛出异常的组件中使用它。另外值得一提的是异常边界并不能捕获其本身的异常,如果异常边界组件本身抛出了异常,那么会冒泡传递到上一层最近的异常边界中。

在真实地应用开发中有的开发者也会将崩坏的界面直接展示给开发者,不过譬如在某个聊天界面中,如果在出现异常的情况下仍然直接将界面展示给用户,就有可能导致用户将信息发送给错误的接受者;或者在某些支付应用中导致用户金额显示错误。因此如果我们将应用升级到 React 16.x,我们需要将原本应用中没有被处理地异常统一包裹进异常边界中。譬如某个应用中可能会分为侧边栏、信息面板、会话界面、信息输入等几个不同的模块,我们可以将这些模块包裹进不同的错误边界中;这样如果某个组件发生崩溃,会被其直属的异常边界捕获,从而保证剩余的部分依然处于可用状态。同样的我们也可以在异常边界中添加错误反馈等服务接口以及时反馈生产环境下的异常并且修复他们。完整的应用代码如下所示:

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { error: null, errorInfo: null };
 }

 componentDidCatch(error, errorInfo) {
  // Catch errors in any components below and re-render with error message
this.setState({
   error: error,
   errorInfo: errorInfo
  })
  // You can also log error messages to an error reporting service here
 }

 render() {
if (this.state.errorInfo) {
   // Error path
return (
    <div>
     <h2>Something went wrong.</h2>
     <details style={{ whiteSpace: 'pre-wrap' }}>
      {this.state.error && this.state.error.toString()}
      <br />
      {this.state.errorInfo.componentStack}
     </details>
    </div>
   );
  }
  // Normally, just render children
return this.props.children;
 } 
}

class BuggyCounter extends React.Component {
constructor(props) {
super(props);
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
 }

 handleClick() {
this.setState(({counter}) => ({
   counter: counter + 1
  }));
 }

 render() {
if (this.state.counter === 5) {
   // Simulate a JS error
throw new Error('I crashed!');
  }
return <h1 onClick={this.handleClick}>{this.state.counter}</h1>;
 }
}

function App() {
return (
  <div>
   <p>
    <b>
     This is an example of error boundaries in React 16.
     <br /><br />
     Click on the numbers to increase the counters.
     <br />
     The counter is programmed to throw when it reaches 5. This simulates a JavaScript error in a component.
    </b>
   </p>
   <hr />
   <ErrorBoundary>
    <p>These two counters are inside the same error boundary. If one crashes, the error boundary will replace both of them.</p>
    <BuggyCounter />
    <BuggyCounter />
   </ErrorBoundary>
   <hr />
   <p>These two counters are each inside of their own error boundary. So if one crashes, the other is not affected.</p>
   <ErrorBoundary><BuggyCounter /></ErrorBoundary>
   <ErrorBoundary><BuggyCounter /></ErrorBoundary>
  </div>
 );
}



ReactDOM.render(
 <App />,
 document.getElementById('root')
);

以上就是详解React 16 中的异常处理的资料整理,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
jQuery插件Validation表单验证详解
May 26 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
JavaScript截屏功能的实现代码
Jul 28 #Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 #Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 #Javascript
js 获取html5的data属性实现方法
Jul 28 #Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 #jQuery
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 #Javascript
js原生代码实现轮播图的实例讲解
Jul 28 #Javascript
You might like
一个oracle+PHP的查询的例子
2006/10/09 PHP
php xml实例 留言本
2009/03/20 PHP
php Undefined index的问题
2009/06/01 PHP
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
PHP循环结构实例讲解
2014/02/10 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
php数组指针操作详解
2017/02/14 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
python连接mysql并提交mysql事务示例
2014/03/05 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
Django的Modelforms用法简介
2019/07/27 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
公司门卫的岗位职责
2014/02/19 职场文书
销售开票员岗位职责
2015/04/15 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
Redis全局ID生成器的实现
2022/06/05 Redis