lazy 内置方法

lazy 是 React 提供的懒（动态）加载组件的方法 React.lazy()

参数

一个函数：动态导入组件 import()（必须支持Promise）

好处

减少打包体积、对初次渲染不适用的组件延迟加载

:::info 依赖内置组件 Suspense :::

Suspense

Suspense 悬念 担忧 忧虑，将来即将发生的事情给人带来担忧和悬念 组件能否加载出来呢？那不管了，我先有个 Loading 的界面出来，确定能加载后那我把组件加载出来

React 内置组件，使用 fallback props 把 lazy 后的组件 挂载到 React
给 lazy 加上 loading 指示器组件的一个容器组件

例子

loading.jsx (静态导入)

  1. import React from 'react';
  3. class Loading extends React.Component {
  4.     render(){
  5.       return <div>Loading ...</div>
  6.   }
  7. }
  9. export default Loading;

main.jsx

  1. import React from 'react';
  3. class Main extends React.Component {
  4.     render(){
  5.       return <div>MAIN</div>
  6.   }
  7. }
  9. export default Main;

index.jsx

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  4. import Loading from './loading.jsx'
  6. const MainComponent = React.lazy(()=> import('./main.js'));
  8. class App extends React.Component {
  9.   render(){
  10.     return (
  11.       <React.Suspense fallback={<Loading />}>
  12.         <div>
  13.           <MainComponent />
  14.         </div>
  15.       </React.Suspense>
  16.     )
  17.   }
  18. }
  20. ReactDOM.render(
  21.   <App />, 
  22.   docuement.getElementById('app')
  23. );

分析

lazy 接收一个动态导入组件的函数
该函数返回一个 Promise (IE 使用 ployfill)
Promise 会 reolve 一个默认导出的 React 组件 export default xxx

Suspense 目前只和 lazy 配合实现组件等待加载指示器的功能

服务端渲染 SSR

使用 Loadable Components

  • 是一个 React 代码分割的库
    • 预获取
    • SSR
    • 完全支持动态加载
  • 使用时把 lazy 换成 loadable 就能实现服务端懒加载