详解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 相关文章推荐
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
JS 实现百度搜索功能
Feb 01 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
js实现简易拖拽的示例
Oct 26 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
生成php程序的php代码
2008/04/07 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
一些技巧性实用js代码小结
2009/10/14 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
javascript正则表达式总结
2016/02/29 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
Python常见数字运算操作实例小结
2019/03/22 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
python实现简单井字棋小游戏
2020/03/05 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
adidas美国官网:adidas US
2016/09/21 全球购物
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
满月酒主持词
2014/03/27 职场文书
公司投资建议书
2014/05/16 职场文书
团日活动总结报告
2014/06/25 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
学校团代会开幕词
2016/03/04 职场文书
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL