React.js |错误边界

前言：做笔记，参考：react文档，文章涉及的示例：https://sanhuamao1.coding.net/public/note/myapp/git/files/13Error-Boundaries

错误边界

错误边界是一种 React 组件，可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且渲染出备用 UI。错误边界在渲染期间、生命周期和整个组件树的构造函数中捕获错误。

它无法在以下场景捕获错误：

事件处理（了解更多）

异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）

服务端渲染

它自身抛出来的错误（并非它的子组件）

使用方式

这是两种生命周期方法。只要class组件用了任意一种，那它就变成一个错误边界组件

componentDidCatch() ：打印错误
static getDerivedStateFromError() ：渲染备用 UI

方式一：componentDidCatch()

class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
    componentDidCatch(error, errorInfo) {
      this.setState({
          error:error,
          errorInfo:errorInfo
      })
    }
    render() {
      if (this.state.errorInfo) {
        return <div>
            {this.state.error&&this.state.error.toString()}<br/> {this.state.errorInfo.componentStack}
        </div>
        
      }
      //正常则返回子元素，即该组件包裹的元素
      return this.props.children; 
    }
 }

一个测试组件，如果输入的是非字母就会报错：

class Example extends React.Component{
    constructor(props){
        super(props)
        this.state={value:""}
        this.handleChange=(e)=>{
            this.setState({value:e.target.value})
        }
    }
    render(){
        const value=this.state.value
        if(/^[a-zA-Z]+$/.test(value)||value===""){
            return  <input type="text" onChange={this.handleChange} placeholder="只能填字母"/>
        }
        throw new Error('出错了！');
    }
}

App.js

<ErrorBoundary>
   <Example />
</ErrorBoundary>

方式二：static getDerivedStateFromError()

class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
    static getDerivedStateFromError(error) {
      return { hasError: true };
    }
    
    render() {
      if (this.state.hasError) {
        //显示降级UI
        return <div>出错了bro！</div>
      }
      return this.props.children; 
    }
 }

你也可以同时使用两种。

看样子componentDidCatch()好像没什么用，因为一般情况下浏览器会告诉你只能在控制台看错误日志，并且在没有使用该错误边界组件的情况下，控制台也会打印出同样的错误信息。相比之下，能渲染出备用组件的static getDerivedStateFromError()的实用性高一点。其实，无论使用哪一种，它都起到了创建错误边界组件的作用。

错误边界组件的工作方式类似于 JavaScript 的 catch {}，不同之处在于它只针对 React 组件。且只有 class 组件才可以成为错误边界组件。注意，它无法捕获其自身的错误。

如果没有使用错误边界会怎样？

自 React 16 起，任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载。

经验告诉我们，完全移除比保留错误UI更好。例如，在类似 Messenger 的产品中，把异常的 UI 展示给用户可能会导致用户将信息错发给别人。

增加错误边界能够让你在应用发生异常时提供更好的用户体验。例如，Facebook Messenger 将侧边栏、信息面板、聊天记录以及信息输入框包装在单独的错误边界中。如果其中的某些 UI 组件崩溃，其余部分仍然能够交互。

try/catch的缺陷

try / catch 很棒但它仅能用于命令式代码：

try {
  showButton();
} catch (error) {
  // ...
}

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

<Button />

为什么无法捕获事件处理器的内部错误？

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>捕获到一个错误</h1>
    }
    return <button onClick={this.handleClick}>点击</button>
  }
}