React 中的 ErrorBoundary

在 React 中,如果不做任何控制,当组件出现异常时,React 渲染就会停止,页面出现白屏,这种体验很不好。例如当用户输入某些非法数据,而前端都没有进行校验,页面出现白屏。这种情况下,最好的方式是只针对出错的组件进行处理,将出错的组件进行替换,替换成错误提示组件,并显示错误信息,可以指导用户的下一步操作。React 通过 ErrorBoundary 组件进行错误处理,当组件出现错误时,组件停止当前渲染并通过 Fiber 向上查找,如果找到 ErrorBoundary,就显示 Fallback 组件,否则出现白屏。

看一个简单的例子,主要看 Error 组件,当抛出异常时,会显示白屏。

复制代码
### App 组件
export default function App() {

  const AList = lazy(()=>import('./List.js'))
  const r = useRef(null)  
  const [show, setShow] = useState(false);
  
  return (
    <>
  
    <TODO/>
    <ErrorComponent/>
    </>
  );
}
### Error 组件
import React from 'react';

export function ErrorComponent(){
  
    // throw new Error('出错了!!');
    return <div style={{"text-align":"center", "font-size":"50px","color":"red"}}>错误</div>;
  
}

异常被注释掉时,组件正常显示。

打开注释,页面崩溃。

getDerivedStateFromError

在 React 中,如果想捕获子组件的异常需要定义 getDerivedStateFromError,当子组件出现异常时 React 会调用这个方法。ErrorBoundary 需要是一个类组件,在组件中定义 getDerivedStateFromError 方法。以下代码实现了 ErrorBoundary 组件,重点看 getDerivedStateFromError 方法。

复制代码
import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render shows the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.log('Logging error:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>组件出现异常</h1>;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

将 ErrorComponent 设置为 Boundary 的子组件,组件被替换。

复制代码
    <ErrorBoundary>
      <ErrorComponent/>
    </ErrorBoundary>

React 如何实现

跟踪一下 React 代码,看 React 如何实现 getDerivedStateFromError,在组件发生异常时通过 try/catch 捕获并进入 handleError 方法

进入 handleError 并调用 throwException 方法

在 throwException 中判断是否存在 getDerivedStateFromError 方法,如果存在继续处理,进入createClassErrorUpdate

创建 update 并返回,update.payload 方法会调用 getDerivedStateFromError

将 update 加入 WIP 中的 updateQueue

从throwException 返回,进入 completeUnitOfWork,并返回 returnFiber (ErrorBoundary)。

最后最近进入finishClassComponent 渲染组件

总结

React 框架中通过 getDerivedStateFromError 方法进行异常处理,项目开发可以自定义一个类组件并实现该方法进行组件异常处理。

相关推荐
mCell7 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip7 小时前
Node.js 子进程:child_process
前端·javascript
excel10 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel11 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼12 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping12 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙13 小时前
[译] Composition in CSS
前端·css
白水清风13 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix14 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780014 小时前
new、原型和原型链浅析
前端·javascript