react之错误边界

错误边界实质是指什么

实际上是组件

错误边界捕获什么时候的错误

在渲染阶段的错误

错误边界捕获的是谁的错误

捕获的是子组件的错误

错误边界不能捕获什么错误

1、不能捕获异步代码

2、不能捕获事件处理函数

3、不能捕获服务端渲染

4、不能捕获自身抛出的错误

错误边界代码封装

javascript 复制代码
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
    };
  }
  getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }
  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    logErrorToService(error, errorInfo);
  }
  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>wrong message</h1>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

错误边界适合类组件

相关推荐
linweidong11 分钟前
让低端机也能飞:Canvas/WebGL/Viz 分层、降级渲染与数据抽样策略
前端框架·webgl·canvas·前端动画·前端面经·css渲染·动画优化
醉方休14 分钟前
React 官方推荐使用 Vite
前端·react.js·前端框架
Dontla19 分钟前
React惰性初始化函数(Lazy Initializer)(首次渲染时执行一次,只执行一次,应对昂贵初始化逻辑)(传入一个函数、传入函数)
前端·javascript·react.js
lypzcgf28 分钟前
FastbuildAI新建套餐-前端代码分析
前端·智能体平台·ai应用平台·agent平台·fastbuildai
南囝coding41 分钟前
Claude Code 插件系统来了
前端·后端·程序员
摇滚侠1 小时前
Spring Boot 3零基础教程,WEB 开发 默认的自动配置,笔记25
前端·spring boot·笔记
Cherry Zack1 小时前
Vue Router 路由管理完全指南:从入门到精通前言
前端·javascript·vue.js
亮子AI2 小时前
【npm】npm install 产生软件包冲突怎么办?(详细步骤)
前端·npm·node.js
汪汪大队u2 小时前
为什么 filter-policy 仅对 ASBR 的出方向生效,且即使在该生效场景下,被过滤的路由在协议内部(如协议数据库)依然存在,没有被彻底移除?
服务器·前端·网络
慧一居士2 小时前
vue.config.js 文件功能介绍,使用说明,对应完整示例演示
前端·vue.js