react-错误边界

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

错误边界

部分UI的错误不应该导致整个应用崩溃，为了解决这个问题，react16引入了一个新的概念，错误边界

错误边界是一种react组件，这种组件可以捕获并打印发生在其子组件树任何位置的JavaScript错误，并且，他会渲染出备用的UI而不是渲染那些崩溃了的子组件树。错误边界在渲染期间，生命周期方法和整个组件树构造函数中捕获错误

注意：错误边界无法捕获到以下场景中产生的错误

• 事件处理
• 异步代码（setTimeout 或 requestAnimationFrame 回调函数）
• 服务端渲染
• 它自身抛出来的错误（并非它的子组件）

如果一个class组件定义了 static getDerevedStaticFormatError 或者 ComponentDidCatch这两个生命周期的任意一个(或者两个)时，那它就变成一个错误边界，当抛出错误时，请使用static getDerevedStaticFormatError渲染备用UI，ComponentDidCatch打印错误信息

示例

import React from 'react'
class ErrorBoundaries extends React.Component{
  constructor (props) {
    super(props);
    this.state = {
      error:null,
      errorInfo:null
    }
  }
  static getDeruvedStateFromError(error){
    return {
      error: error
    }
  }
  componentDidCatch (error, errorInfo) {
    this.setState({
      error:error,
      errorInfo:errorInfo
    })
  }
  render () {
    if(this.state.errorInfo){
      return (
        <div>
          <h1>Something went wrong</h1>
          <div style={{whiteSpace:'pre-wrap'}}>
            {this.state.error && this.state.error.toString()}
            <br/>
            {this.state.errorInfo.componentStack}
          </div>
        </div>
      )
    }
    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(state => ({
      state,
      counter:state.counter + 1
    }))
  }
  render () {
    if(this.state.counter === 5){
      throw new Error('I crashed')
    }
    return (
      <h1 onClick={this.handleClick}>{this.state.counter}</h1>
    )
  }
}
class App extends React.Component{
  constructor (props) {super(props);}
  render () {
    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 programed to throw when it reaches 5.This simulates a JavaScript error in a component
          </b>
        </p>
        <br/>
        <ErrorBoundaries>
          <p>These two counters are inside the same error boundary if one crashes the error boundary will replace both of them</p>
          <BuggyCounter></BuggyCounter>
          <BuggyCounter></BuggyCounter>
        </ErrorBoundaries>
        <br/>
        <p>These two counters are each inside of their own error boundary. so if one crashes,hte other is not affected</p>
        <ErrorBoundaries>
          <BuggyCounter></BuggyCounter>
        </ErrorBoundaries>
        <ErrorBoundaries>
          <BuggyCounter></BuggyCounter>
        </ErrorBoundaries>
      </div>

    )
  }
}
export default App

错误边界的芳芳应该放在那里？

可以包装在最顶层的路由组件，也可以单独放在组件外