【react】React.lazy

注意:React.lazy 和 Suspense 技术还不支持服务端渲染。如果你想要在使用服务端渲染的应用中使用，我们推荐 Loadable Components 这个库。它有一个很棒的服务端渲染打包指南。

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

使用之前：

import OtherComponent from './OtherComponent';

使用之后：

const OtherComponent = React.lazy(() => import('./OtherComponent'));

此代码将会在组件首次渲染时，自动导入包含 OtherComponent 组件的包。

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

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

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

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>);
}

【react】React.lazy相关推荐

【构建】react打造你的第一个Bilibili首页开发项目
[构建]react打造你的第一个Bilibili首页开发项目简介 Hello 小极客们,如果觉得本文还不错,记得点个赞或者给个 star,你们的赞和 star 是我编写更多更丰富开源项目的动力![ ...
【入门】React 17 + Vite + ECharts 实现疫情数据可视化「02 快速搭建项目」
往期文章目录: [入门]React 17 + Vite + ECharts 实现疫情数据可视化「01 项目介绍篇」文章目录快速搭建项目介绍 Vite Vite 特点搭建第一个 Vite 项目 ...
【React】React 详细教程
前言 1.react与vue的对比 1.1.什么是模块化是从代码的角度来进行分析的把一些可复用的代码抽离为单独的模块:便于项目的维护和开发 1.2.什么是组件化是从UI界面角度来进行分析的把一 ...
【尚硅谷React】——React全家桶笔记
文章目录第1章 React简介 1.1 React的特点 1.2 引入文件 1.3 JSX 1.3.1 为什么要用JSX 1.3.2 JSX语法规则 1.4 虚拟DOM 1.5 模块与组件 1.5. ...
【前端】react and redux教程学习实践，浅显易懂的实践学习方法。
前言前几天,我在博文[前端]一步一步使用webpack+react+scss脚手架重构项目中搭建了一个react开发环境.然而在实际的开发过程中,或者是在对源码的理解中,感受到react中用的最多 ...
【温故知新】—— React/Redux/React-router4基础知识独立团Demo
前言:React专注View层,一切皆组件:全部使用ES6语法,最新版本为React16. Redux是专注于状态管理的库,和react解耦:单一状态,单向数据流.[独立团github地址] 一.Re ...
[置顶] 【稀饭】react native 实战系列教程之热更新原理分析与实现
很多人在技术选型的时候,会选择RN是因为它具有热更新,而且这是它的一个特性,所以实现起来会相对比较简单,不像原生那样,原生的热更新是一个大工程.那就目前来看,RN的热更新方案已有的,有微软的CodeP ...
【转】React Vue MVC MVVM MVP
首先,在谈这个话题之前, 我们有必要了解一下库和框架的区别. 我们先来看react官网以及vue官网对他们的定位: react: vue: react我们不说了,官网上明明白白说了,人家是一个libr ...
【React】React介绍环境搭建
一.React介绍 1.React是什么一个专注于构建用户界面的 JavaScript 库,和vue和angular并称前端三大框架,不夸张的说,react引领了很多新思想,世界范围内是最流行的js ...
【React】React全栈脚手架搭建-苹果篮子示例
接着上一章,脚手架已经搭建完毕,接下来便可以编写组件,先上效果图: 对苹果篮子页面进行组件切割根据视图,我们可以将其切割为两部分 AppleItem:里面的苹果列表项 AppleBasket:包着苹 ...

【react】React.lazy

【react】React.lazy相关推荐

最新文章

热门文章