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