React 之错误边界

69 阅读2分钟

在 react 应用中,如果某一个组件发生错误,会导致整个应用程序中断,体验极差。因此,react 提出了错误边界这个设计理念。如果后代组件发生错误,它可以捕获组件渲染时的错误,改为显示我们提前设计好的备用界面。

错误边界核心

错误边界主要涉及两个生命周期函数,分别是 getDerivedStateFromErrorcomponentDidCatch

getDerivedStateFromError() 这个方法是类组件的静态方法。当后代组件发生错误时,会触发这个生命周期函数,它将抛出的错误作为参数,并返回一个对象,这个对象要用以更新 state 中的值。

    static getDerivedStateFromError(error) {
        // 更新 state 使下一次渲染可以显降级 UI
        return { hasError: true };
    }

componentDidCatch() 当后代组件出现错误的时候,会自动触发这个生命周期函数的调用。该方法的参数就是错误对象。

componentDidCatch(err) {
    console.log("错误边界")
}

错误边界应用

接下来我们举个错误边界的例子。

我们在项目目录下创建一个 Error.js 的文件,里面的内容如下:

//Error.js
import React from "react"
import App from "./App.js"class Error extends React.Component {
    constructor(props) {
        super()
        this.state = { hasError: false };
    }
    static getDerivedStateFromError(error) {
        // 更新 state 使下一次渲染可以显降级 UI
        return { hasError: true };
    }
    componentDidCatch(err) {
        console.log("错误边界")
    }
    render() {
        if(this.state.hasError) {
            return <div><h3>组件发生了错误</h3></div>
        }
        return <App></App>
      }
}
export default Error

这里面大家需要注意,我们把 App 组件当作错误边界的父组件了。**同时要强调一下,错误边界的本质是一个组件。**它的目的就是把所有的组件都控制在自己的范围内。当有组件出错,整个程序的执行是正常的。唯有把相关的组件渲染到界面中,给用户更直白的阐述,用户才能明白,毕竟用户是读不懂代码的。

现在我们我们书写一个 App 组件:

//App.js
import React,{ Component,useState,useEffect } from "react"
import ReactDOM from 'react-dom';​

class App extends Component {
    constructor(){
        super()
    }
    render() {
        throw Error("cuowubianjie")
        return (<div>hello</div>)
    }
}
export default App;

在这里我们故意抛出了一个错误,throw Error("cuowubianjie")。

运行程序,在界面中我们看到的不再是报错相关的代码,而是一个跟报错相关的界面。

提醒一下,在 index.js 中不再把 App 组件写在 render 里了,而是写入 Error 组件。