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 尝鲜的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。