react 16.6 發(fā)布了新的功能 lazy ，和一個(gè)組件 Suspense

下面我們看一下他的用法

首先我們先創(chuàng)建兩個(gè)組件 LazyTest.1 和 LazyTest.2，內(nèi)容相同

import React, { Component } from 'react'export default class LazyTest extends Component{render(){return (<div><h1>LazyTest 組件</h1></div>);} } 復(fù)制代碼

然后在 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; 復(fù)制代碼

Suspense 可以放在懶加載的組件外層的任意位置，fallback 是懶加載組件載入過程中的一個(gè)過渡，可以放一些過渡效果或方法。

下面我們看一下打出來的包

其中 LazyTest.1 和 LazyTest.2 分別達(dá)成了獨(dú)立的包。

是不是很方便呀，你也快來試試吧！

注意：React.lazy和 Suspense 尚不可用于服務(wù)器端，如果做服務(wù)端渲染的同學(xué)官方還是建議使用 React Loadable

總結(jié)

以上是生活随笔為你收集整理的react 16.6 懒加载 Lazy 尝鲜的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。