错误边界

过去，组件内的JavaScript错误会导致React的内部状态被破坏，并且在下一次渲染时产生可能无法追踪的错误。这些错误基本上是因为较早的其他代码（非React组件代码）错误引起的，但是React并没有提供一种在组件中优雅处理这些错误的方式，也无法从错误中恢复。

错误边界（Error Boundaries）

部分UI的javascript错误不应该导致整个应用崩溃，为了解决这个问题，React16引入了一个新的概念——————错误边界。错误边界是一种React组件，这些组件可以捕获并打印发生在其子组件树任何位置的JavaScript错误，并且他会渲染出备用UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间，生命周期方法和整个组件树的构造函数中捕获错误。

需要注意的是，错误边界无法捕获以下场景中产生的错误：

事件处理
异步代码
服务端渲染
它自己抛出来的错误（并非它的子组件）

如果一个class组件中定义了static getDerivedStateFromError()或componentDidCatch()这两个生命周期方法中的任意一个（或两个）时，那么它就变成了一个错误边界。当抛出错误后，请使用static getDerivedStateFromError()渲染备用UI，使用componentDidCatch打印错误信息。

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            hasError: false
        }
    }
    static getDerivedStateFromError (error) {
        // 更新state 使得下一次渲染能够显示降级之后的UI
        return { hasError: true }
    }

    componentDidCatch(err,errInfo){
        console.log(err,errInfo)
        // logErrorToMyService(err,errInfo);// 上传服务器
    }

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

        return this.props.children
    }
}
function App(){
    return (
        <ErrorBoundary>
              <MyWidget  />
        </ErrorBoundary>
    )
}

function MyWidget(){
    throw new Error('测试')
    return 'xxx'
}
ReactDOM.render(<App />, document.querySelector('#root'))

使用方式作为一个常规组件去使用：

<ErrorBoundary>
    <MyWidget  />
</ErrorBoundary>

错误边界的工作方式类似于JavaScript的catch()，不同的地方在于错误边界只针对React组件。只有class组件才可以成为错误边界组件。大多数情况下，你只需要声明一次错误边界组件，并在整个应用中使用它。

注意错误边界仅可以捕获其子组件的错误，他无法捕获其自身的错误。如果一个错误边界无法渲染错误信息，则错误会冒泡至最近的上层错误边界，这也类似于JavaScript中的catch{}的工作机制。

错误编辑应该放置在哪里？

错误边界的粒度由你来决定，可以将其包装在最顶层的路由组件并为用户展示一个something went wrong的错误信息，就想服务端框架经常处理崩溃一样。你也可以将单独部件包装在错误边界以保护其他部分不崩溃。

未捕获错误（Uncaught Errors）的新行为

这一改变具有重要意义，自React 16起，任何未被错误边界捕获的错误将会导致整个React组件树被卸载。因为很多情况下，把一个错误的UI留在那比完全移除它要更糟糕。例如类似messenger的产品中，把一个异常的UI展示给用户可能会导致用户信息错发给别人。同样对于支付类应用来说，显示错误的金额也比不呈现任何内容更糟糕。你也可以将不同部分的UI包裹在不同的错误边界中，某一部分的UI组件崩溃，但是其余部分仍能正常使用。

关于try/catch?

try/catch仅能用于命令式代码：

try{

}catch(err){

}

然而，React组件是声明式的并且具体指出什么需要被渲染：

<Button  />

错误边界保留了React声明性质，其行为符合预期。例如即使一个错误发生在componentDidUpdate方法中，并且由某一个深层组件树的setState引起，其仍然能够冒泡到最近的错误边界。

关于事件处理器

错误边界无法捕获事件处理器内部的错误。 React不需要错误边界来捕获事件处理器中的错误。与render方法和生命周期方法不同，事件处理器不会在渲染期间触发。因此，如果他们抛出异常，React仍然能够知道需要在屏幕上展示什么。如果你需要在事件处理器内部捕获错误，使用普通的JavaScript try/catch语句即可。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    try {
      // 执行操作，如有错误则会抛出
    } catch (error) {
      this.setState({ error });
    }
  }

  render() {
    if (this.state.error) {
      return <h1>Caught an error.</h1>
    }
    return <button onClick={this.handleClick}>Click Me</button>
  }
}

请注意上述例子只是演示了普通的 JavaScript 行为，并没有使用错误边界。

错误边界 ​

错误边界（Error Boundaries） ​

错误编辑应该放置在哪里？ ​

未捕获错误（Uncaught Errors）的新行为 ​

关于try/catch? ​