# 错误边界

* 过去，组件内的 JavaScript 错误会导致 React 的内部状态被破坏，并且在下一次渲染时产生可能无法追踪的错误
* 这些错误基本上是由较早的其他代码（非React组件代码）错误引起的，但是 React 并没有提供一种在组件中优雅处理这些错误的方式，也无法从错误中恢复。
* 部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了一个新的概念：错误边界
* 错误边界是一种 React 组件，这种组件
  * 可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI 而不是渲染那些崩溃的子组件树
  * 错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误
  * 错误边界无法捕获以下场景中发生的错误
    * 事件处理 React 不需要错误边界来捕获事件处理器中的错误 使用 try / catch
    * 异步代码 setTimeout 或 requestAnimationFrame 
    * 服务端渲染
    * 它自身抛出的错误 并非它的子组件
* 如果一个 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意 一个 或 两个 时，那么它就变成了一个错误边界
  * 当抛出错误时，使用 static getDerivedStateFromError() 渲染备用 UI
  * 使用 componentDidCatch() 打印错误信息
* 错误边界的工作方式类似于 JavaScript 的 catch {}
  * 不同的地方在于错误边界只针对 React 组件
  * 只有 class 组件才可以成为错误边界组件
  * 大多数情况下，你只需要声明一次错误边界组件，并在整个应用中使用它
  * 如果一个错误边界无法渲染错误信息，则错误会冒泡至最近的上层错误边界，这也类似于 JavaScript 中 catch {} 的工作机制

\`\`\`jsx harmony

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

static getDerivedStateFromError(error) { // 更新 state 使下一次渲染能够显示降级后的 UI return { hasError: true }; }

componentDidCatch(error, errorInfo) { // 你同样可以将错误日志上报给服务器 logErrorToMyService(error, errorInfo); }

render() { if (this.state.hasError) { // 你可以自定义降级后的 UI 并渲染 return Something went wrong.; }

```
return this.props.children; 
```

} }

// 可以将它作为一个常规组件去使用

\`\`\`

## 未捕获错误 Uncaught Errors 的新行为

* 自 React 16 起，任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载
* 把一个错误的 UI 留在那比完全移除它要更糟糕