React.lazy()

`React.lazy` 能实现像渲染常规组件一样处理动态引入的组件。

允许你定义一个动态加载的组件。这有助于缩减 bundle 的体积，并延迟加载在初次渲染时未用到的组件。

import React, { Suspense } from 'react';const OtherComponent = React.lazy(() => import('./OtherComponent'));function MyComponent() {return (<div><Suspense fallback={<div>Loading...</div>}><OtherComponent /></Suspense></div>);
}

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

请注意，渲染 lazy 组件依赖该组件渲染树上层的 <React.Suspense> 组件。这是指定加载指示器（loading indicator）的方式，以防其组件树中的某些子组件尚未具备渲染条件。

应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）。

fallback 属性接受任何在组件加载过程中你想展示的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置。你甚至可以用一个 Suspense 组件包裹多个懒加载组件。

import React, { Suspense } from 'react';const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));function MyComponent() {return (<div><Suspense fallback={<div>Loading...</div>}><section><OtherComponent /><AnotherComponent /></section></Suspense></div>);
}

异常捕获边界（Error boundaries）

如果模块加载失败（如网络问题），它会触发一个错误。

可以通过异常捕获边界（Error boundaries）技术来处理这些情况，以显示良好的用户体验并管理恢复事宜。

import React, { Suspense } from 'react';
import MyErrorBoundary from './MyErrorBoundary';const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));const MyComponent = () => (<div><MyErrorBoundary><Suspense fallback={<div>Loading...</div>}><section><OtherComponent /><AnotherComponent /></section></Suspense></MyErrorBoundary></div>
);

React.lazy()相关推荐

react.lazy 路由懒加载_React lazy/Suspense使用及源码解析
React v16.6.0已经发布快一年了,为保障项目迭代发布,没有及时更新react版本,最近由于开启了新项目,于是使用新的react版本进行了项目开发.项目工程如何搭建,如何满足兼容性要求,如何规 ...
react-activation缓存React.lazy异步组件问题记录
1.背景当前框架使用的路由规则是使用React.lazy动态绘制的,使用KeepAlive组件缓存时一直不能缓存 export const RouteWithChildrenSubRoutes = ...
useRoutes与React.lazy的使用
注意react-router-dom的版本6.3.0 和reac版本18.0.0 routeConfig.js import React from 'react'; const Dashboard = ...
React.lazy与Suspence实现延迟加载
React.lazy与Suspence实现延迟加载 1 代码分割 2 React.Lazy 3 Suspense 4 备注 1 代码分割代码分割能够创建多个包并在运行时动态加载,它能够帮助我们&qu ...
react hook之React.lazy()
也不怕大家笑话,看到react.lazy()我第一个想到的居然是vue 中的一个vue-lazy 用户懒加载的插件.但是这两个差别还是有点大的. 好了我们言归正传,开始来看看我们的react.lazy ...
【react】React.lazy
注意:React.lazy 和 Suspense 技术还不支持服务端渲染.如果你想要在使用服务端渲染的应用中使用,我们推荐 Loadable Components 这个库.它有一个很棒的服务端渲染打包 ...
React开发（203）:react代码分割之React.lazy
react.lazy 路由懒加载_Vue面试题：如何实现路由懒加载？
非懒加载 import List from '@/components/list.vue' const router = new VueRouter({routes: [{ path: '/list' ...
react 日历组件_anujs1.5.1支持React.Suspense与lazy
React16是一个实验版本,除了测试它的新fiber架构外,还添加了大量新功能.其他React.Suspense与React.lazy就是重磅中的重磅. 随着前端的APP化,不断集成功能,页面越来越 ...

React.lazy()

`React.lazy` 能实现像渲染常规组件一样处理动态引入的组件。

异常捕获边界（Error boundaries）

React.lazy()相关推荐

最新文章

热门文章

React.lazy()

React.lazy 能实现像渲染常规组件一样处理动态引入的组件。

异常捕获边界（Error boundaries）

React.lazy()相关推荐

最新文章

热门文章

`React.lazy` 能实现像渲染常规组件一样处理动态引入的组件。