React 之错误边界
嗨，我是勾勾。
在 react 应用中，如果某一个组件发生错误，会导致整个应用程序中断，体验极差。因此，react 提出了错误边界这个设计理念。如果后代组件发生错误，它可以捕获组件渲染时的错误，改为显示我们提前设计好的备用界面。
错误边界核心
错误边界主要涉及两个生命周期函数，分别是 getDerivedStateFromError 和 componentDidCatch。
getDerivedStateFromError() 这个方法是类组件的静态方法。当后代组件发生错误时，会触发这个生命周期函数，它将抛出的错误作为参数，并返回一个对象，这个对象要用以更新 state 中的值。
static getDerivedStateFromError(error) {// 更新 state 使下一次渲染可以显降级 UIreturn { 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 使下一次渲染可以显降级 UIreturn { 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 组件。
推荐阅读：
点个“在看”和“赞”吧，
毕竟我是要成为前端网红的人。
评论