React 页面空白之错误边界
2026-03-05 16:17:34
theme: juejin
highlight: a11y-dark
某个不懂前端的领导问，为什么页面里随便报个错误就空白啊，你们到底是怎么处理的，封装的东西就有点问题啊，，，，劈里啪啦的说一大堆
enen，回头想了想，从页面使用层面上来讲好像这个道理，网页的某个地方发生错误应该只影响到局部而不是整体效果。查阅官方文档后得知自react16之后， 任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载。 整个组件树被卸载，即页面出现空白，整个应用组件树都被卸载掉，空白那是肯定的。但既然这样做肯定还有补救的方法。
部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界
React中提供了两个与错误处理相关的api：
如果一个 class 组件中定义了 getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。当抛出错误后，请使用 getDerivedStateFromError() 渲染备用 UI ，使用 componentDidCatch() 打印错误信息。
4-1、创建边界错误组件ErrorBoundary
4-2、在其它组件，路由里页面里引用包裹在最外层即可
4-3、注意
错误边界的工作方式类似于原生的 catch {} ，不同的地方在于，错误边界只针对 React 组件。并且只有 class 组件才可以成为错误边界组件。大多数情况下, 你只需要声明一次错误边界组件, 并在整个应用中使用它
错误边界的粒度由你来决定，可以将其包装在最顶层的路由组件中，也可以根据需要放在某些组件上包裹，这个具体问题具体分析吧
4-4、适用情况
5-1、创建边界组件 ErrorBoundary
5-2、路由页面最外层嵌套使用
5-3、创建一个组件 ComDemo，里面实现个异常错误，通常这种错误会导致页面空白，整个应用崩溃
5-4、页面里使用错误组件
跟着上面走下来就是一个完整使用过程了
问题
当捕获到边界异常的时候，刷新组件会导致整个页面刷新，在这种情况下，体验感还是不是很好，要怎么做到只影响出现异常的地方，其它地方不被影响，并保持之前的状态，这块我需要研究一下
热门标签
