详解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 相关文章推荐
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
JS实现点击事件统计的简单实例
Jul 10 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
对node.js中render和send的用法详解
May 14 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
Vue使用v-viewer实现图片预览
Oct 21 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中函数rand和mt_rand的区别比较
2012/12/26 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
Python实现的彩票机选器实例
2015/06/17 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
python的re模块使用方法详解
2019/07/26 Python
详解python如何引用包package
2020/06/07 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
学雷锋演讲稿
2014/03/04 职场文书
奥运会口号
2014/06/13 职场文书
课内比教学心得体会
2014/09/09 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
2016国庆促销广告语
2016/01/28 职场文书
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python
使用refresh_token实现无感刷新页面
2022/04/26 Javascript