React 之错误边界

勾勾的前端世界

共 1984字,需浏览 4分钟

 ·

2021-02-26 12:59

嗨,我是勾勾。



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


错误边界核心

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


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

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


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

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


错误边界应用

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


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

//Error.jsimport 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.jsimport 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 组件。


推荐阅读:

性能优化方案,搞定 React 的纯组件!

手动实现一个自己的 React 服务端渲染

计时器组件的两种写法:高阶组件就是坠吼的!

尤雨溪 3 天 10 更的 Vite 究竟有什么魔力?

我对 Webpack 5 真香了。

腾讯QQ偷我浏览记录到底想干嘛。


点个“在看”和“”吧,

毕竟我是要成为前端网红的人。

浏览 52
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报