# React error boundary
# 什么是异常边界
在React 15和更早的版本中，组件内的JavaScript异常会污染React组件内的state，并且会在render时发出不明所以的异常。这些异常一般是由于系统运行过程中更多出现的异常，但是React没有提供一个组件内优雅地解决它们的方法，也不能恢复这些异常。
在开发者看来，用React做的一个大型系统上，UI页面上一个JavaScript代码的小小的异常，不应该影响整个系统的运行，这本来是浏览器在渲染JavaScript时默认采用的一种解析方式，但一般用React来做一个单页面应用（SPA）会把很多页面的代码打包到一起，如果一个JavaScript的报错导致整个系统不能运行，也是一件很糟糕的事情。
所以，这也算是React的设计上的一个小的缺陷，React为了帮助开发者解决这个问题，在React 16这一版中，将引入一个新概念“异常边界”，使用异常边界的组件就是异常边界组件。
异常边界是一个用来捕获组件的子组件树内的JavaScript异常，将这些异常记录下来，并显示一个回调的UI来替换掉崩溃的组件树。
异常边界组件会在组件render过程中，生命周期函数内和组件下的整个树形组件的构造函数内运行。
# 如何使用异常边界
为了实现异常边界，React为组件提供了一个新的生命周期函数：
componentDidCatch(error, info)
# 使用异常边界时需要注意
- 只有类组件（class components）可以被设置成异常边界组件
- 通常情况下，你可能只声明一次异常边界组件，然后在整个项目中使用，当然你也可以设置多个
- 异常边界组件只能捕获它的子组件树上的组件的异常，且不能捕获该组件自身产生的异常
- 如果异常边界组件在捕获到一个异常后，渲染异常信息失败了，那么这个异常会向着该异常边界组件的父级向上传递，直到传递到最近的一个异常边界组件为止
# Code showcase
https://codepen.io/gaearon/pen/wqvxGa?editors=0010