4.2 使用errorboundary(错误边界)捕获渲染错误

一、使用errorboundary捕获渲染错误

默认情况下，如果应用程序在渲染期间抛出错误，React将会从屏幕上移除这个UI。为了防止折个中情况，可以将UI的一部分分包装到错误便捷中。
错误辩解是一种特殊组件，可以显示一些后备的UI而不是崩溃的信息，比如错误消息

安装第三方模块：npm install react-error-boundary

import { classNames } from 'classnames'
import { ErrorBoundary } from 'react-error-boundary'

function Head() {
  // 模拟错误
  classNames()
  return (
    <>
      <div>Head</div>
    </>
  )
}

function App() {
  return (
    <>
      <div>Default Template</div>
    {/* 需要包裹一下 */}
      <ErrorBoundary fallback={<p>有问题</p>}>
        <Head />
      </ErrorBoundary>
    </>
  )
}

export default App

上一页4.1 flushSync确保了DOM立即更新下一页4.3 lazy与Suspense懒加载的组件

最后更新于2年前