react 16.6 懒加载 Lazy 尝鲜

react 16.6 发布了新的功能 lazy ，和一个组件 Suspense

下面我们看一下他的用法

首先我们先创建两个组件 LazyTest.1 和 LazyTest.2，内容相同

import React, { Component } from 'react'export default class LazyTest extends Component{render(){return (<div><h1>LazyTest 组件</h1></div>);}
}
复制代码

然后在 App 入口 js 中分布通过 Lazy 的形式引入

import React, { Component, lazy, Suspense } from 'react';const LazyTest1 = lazy(() => import('./components/LazyTest.1'));
const LazyTest2 = lazy(() => import('./components/LazyTest.2'));class App extends Component {fallback = () =>{return (<div>Loading...</div>);}render() {return (<div><Suspense fallback={this.fallback()}><h1>懒加载组件</h1><LazyTest1 /><LazyTest2 /></Suspense></div>);}
}export default App;
复制代码

Suspense 可以放在懒加载的组件外层的任意位置，fallback 是懒加载组件载入过程中的一个过渡，可以放一些过渡效果或方法。

下面我们看一下打出来的包

其中 LazyTest.1 和 LazyTest.2 分别达成了独立的包。

是不是很方便呀，你也快来试试吧！

注意：React.lazy和 Suspense 尚不可用于服务器端，如果做服务端渲染的同学官方还是建议使用 React Loadable

react 16.6 懒加载 Lazy 尝鲜相关推荐

swift_043（Swift 懒加载(lazy) )
懒加载的优点懒加载(lazy load),其实是延时加载,它的优点显而易见,首先,懒加载将对象的创建延迟到了需要对象的时候,这样减少了内存开销:其次,懒加载将创建对象.相关属性设置内聚在一个&quo ...
react性能优化-懒加载原理
编译阶段的优化开发阶段构建更快 loader的include和exclude属性 {test: /.(j|t)sx?$/,use: [{loader: "thread-loader&quo ...
SpringBoot实现懒加载@Lazy
@Lazy使用说明一般情况下,Spring容器在启动时会创建所有的Bean对象,使用@Lazy注解可以将Bean对象的创建延迟到第一次使用Bean的时候使用方法 1.@Lazy(value = t ...
vue实现路由懒加载，react实现路由懒加载
组件懒加载也叫按需加载: 当打包构建应用时,js 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 打包 bui ...
懒加载Lazy Loading
"懒加载"也被叫作"延迟价值",它的核心思想是把对象的实例化延迟到真正调用该对象的时候,这样做的好处是可以减轻大量对象在实例化时对资源的消耗,而不是在程序初始化 ...
SAP Fiori里的List是如何做到懒加载Lazy load的
今天一同事问我这个问题:S/4HANA Fiori应用里的列表,一旦Scroll到底部就会自动向后台发起新的请求把更多的数据读取到前台显示. 以Product Master这个应用为例,我点击搜索之后 ...
swift -- 单例+ lazy懒加载 + 第三方库
//工具类单例 static let goods : NHGoods = { let good = NHGoods() return good }() //懒加载 lazy var registerB ...
[译]带你揭开Kotlin中属性代理和懒加载语法糖衣
翻译说明: 原标题: How Kotlin's delegated properties and lazy-initialization work 原文地址: https://medium.com/t ...
hql懒加载后判断对象是否存在_hibernate延迟加载（懒加载）详解
延迟加载一．什么是懒加载?他的作用? 延迟加载,也叫懒加载,它是Hibernate为提高程序执行效率而提供的一种机制,即只有真正使用该对象的数据时才会创建. Hibernate中主要是通过代理(pr ...

react 16.6 懒加载 Lazy 尝鲜

react 16.6 懒加载 Lazy 尝鲜相关推荐

最新文章

热门文章