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 方法进行异常处理,项目开发可以自定义一个类组件并实现该方法进行组件异常处理。

相关推荐
打不着的大喇叭38 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code44 分钟前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm1 小时前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
小皮侠1 小时前
nginx的使用
java·运维·服务器·前端·git·nginx·github