React 之错误边界
共 1984字,需浏览 4分钟
·
2021-02-26 12:59
嗨,我是勾勾。
在 react 应用中,如果某一个组件发生错误,会导致整个应用程序中断,体验极差。因此,react 提出了错误边界这个设计理念。如果后代组件发生错误,它可以捕获组件渲染时的错误,改为显示我们提前设计好的备用界面。
错误边界核心
错误边界主要涉及两个生命周期函数,分别是 getDerivedStateFromError 和 componentDidCatch。
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 组件。
推荐阅读:
点个“在看”和“赞”吧,
毕竟我是要成为前端网红的人。