Lazy（懒加载）

React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。

语法：
   React.Lazy(fn)

React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。

import OtherComponent from './OtherComponent'; //使用之前


const OtherComponent = React.lazy(() => import('./OtherComponent'));  //使用之后


const OtherComponent = lazy(() => import("./OtherComponent").then(({OtherComponent}) => ({default: OtherComponent})));  //Lazy in Typescripts

Suspense组件

React提供一个Suspense组件，将我们懒加载组件包裹起来去渲染

拥有一个fallback属性，fallback属性接受一个组件，我们可以在懒加载的时候去做优化降级，做一个加载是的提示


const Loading = ()=>{
    return (
    <div> Loading....</div>
    )
}
<suspense  fallback= {<Loading/>}>
   <OtherComponent/>
</suspense>

异常捕获边界（Error boundaries）

误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。

如果模块加载失败（如网络问题），它会触发一个错误。你可以通过异常捕获边界（Error boundaries）技术来处理这些情况，以显示良好的用户体验并管理恢复事宜。

<MyErrorBoundary>
  <suspense  fallback= {<Loading/>}>
   <OtherComponent/>
  </suspense>
<MyErrorBoundary/>

//它无法捕获以下错误

事件处理（了解更多）
异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
服务端渲染
它自身抛出来的错误（并非它的子组件）

React（懒加载）

Lazy（懒加载）

Suspense组件

异常捕获边界（Error boundaries）