• 售前

  • 售后

热门帖子
入门百科

封装一个最简朴ErrorBoundary组件处理react异常

[复制链接]
XY890 显示全部楼层 发表于 2021-10-26 13:09:39 |阅读模式 打印 上一主题 下一主题
前言

从 React 16 开始,引入了 Error Boundaries 概念,它可以捕捉它的子组件中产生的错误,记载错误日志,并展示降级内容,具体 官网所在

错误边界避免一个组件错误导致整个页面白屏不能使用等环境,使用优雅降级的方式出现备用的 UI,错误边界可以在渲染期间、生命周期和整个组件树的构造函数中捕捉错误。自 React 16 起,任何未被错误边界捕捉的错误将会导致整个 React 组件树被卸载
ErrorBoundary 意义
       
  • 某些 UI 瓦解,不至于整个 webapp 瓦解
在浏览页面时,由于后端返回非常或者前端的某些错误校验,会导致用户体验很差,你想想,你带着老婆,坐着火车,吃着火锅唱着歌,突然被麻匪劫了,突然就报错了,有些场景下,比如正在设置金额,或者查看关键页面时,这样的体验就会很糟糕,比如你游戏充值了 500,结果由于接口原因显示出来充值
  1. NaN
复制代码
,这种显示比不显示还让人苦恼,不外信任大家对 JS 非常捕捉很认识了,
  1. try-catch
复制代码
一包业务代码就收工了。不外,在组件里对非常捕捉,必要用到的是 React 提供的
  1. Error Boundary
复制代码
错误边界特性,用
  1. componentDidCatch
复制代码
钩子来对页面非常举行捕捉,以至于不会将非常扩散到整个页面,有效防止页面白屏。
官网如何实现

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作