react之Lazy和Suspense（懶加載）

React.lazy

React.lazy 函數能讓你像渲染常規組件一樣處理動態引入（的組件）。

什么意思呢？
其實就是懶加載。
其原理就是利用es6 import()函數。這個import不是import命令。
同樣是引入模塊，import命令是同步引入模塊，而import()函數動態引入。

當 Webpack 解析到該語法時，它會自動地開始進行代碼分割(Code Splitting)，分割成一個文件，當使用到這個文件的時候會這段代碼才會被異步加載。

為什么代碼要分割？
當你的程序越來越大，代碼量越來越多。
一個頁面上堆積了很多功能，也許有些功能很可能都用不到，但是一樣下載加載到頁面上，所以這里面肯定有優化空間。

import函數
動態 import() 語法目前只是一個 ECMAScript (JavaScript) 提案， 而不是正式的語法標准。

//import 命令
import { add } from './math';

console.log(add(16, 26));

//import函數
import("./math").then(math => {
  console.log(math.add(16, 26));
});

如何使用React.lazy

這是最簡單的React.lazy，但是這樣頁面會報錯。這個報錯提示我們，在React使用了lazy之后，會存在一個加載中的空檔期，React不知道在這個空檔期中該顯示什么內容，所以需要我們指定。接下來就要使用到Suspense

//OtherComponent.js 文件內容

import React from 'react'
const OtherComponent = ()=>{
  return (
    <div>
      我已加載
    </div>
  )
}
export default OtherComponent

// App.js 文件內容
import React from 'react';
import './App.css';

//使用React.lazy導入OtherComponent組件
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function App() {
  return (
    <div className="App">
      <OtherComponent/>
    </div>
  );
}
export default App;

Suspense

如果在 App 渲染完成后，包含 OtherComponent 的模塊還沒有被加載完成，我們可以使用加載指示器為此組件做優雅降級。這里我們使用 Suspense 組件來解決。

import React, { Suspense, Component } from 'react';
import './App.css';

//使用React.lazy導入OtherComponent組件
const OtherComponent = React.lazy(() => import('./OtherComponent'));

export default class App extends Component {
  state = {
    visible: false
  }
  render() {
    return (
      <div className="App">
        <button onClick={() => {
          this.setState({ visible: true })
        }}>
       
        </button>
           加載OtherComponent組件
        <Suspense fallback={<div>Loading...</div>}>
          {
            this.state.visible
              ?
              <OtherComponent />
              :
              null
          }
        </Suspense>
      </div>
    )
  }
}