详解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学习之闭包分析
Dec 02 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
javascript实现倒计时效果
Feb 17 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实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
33道php常见面试题及答案
2015/07/06 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
js实现移动端轮播图
2020/12/21 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
Python的迭代器和生成器使用实例
2015/01/14 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
用python写测试数据文件过程解析
2019/09/25 Python
wxPython实现分隔窗口
2019/11/19 Python
python 如何在测试中使用 Mock
2021/03/01 Python
网上开店必备创业计划书
2014/01/26 职场文书
幼儿园开学寄语
2014/04/03 职场文书
环保标语大全
2014/06/12 职场文书
社区母亲节活动总结
2015/02/10 职场文书
离婚案件原告代理词
2015/05/23 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python