React的动态加载（lazy import）

1、什么是动态加载？
动态加载即在触发事件的时候，才会去引入需要的方法和对象。
这有利于延迟请求和延迟加载方法

2、静态加载和动态加载的对比

• 静态加载（编译时加载）：

import {add} from './moduleA'
console.log(add(1,2))

• 动态加载

import ('./moduleA').then(e=>{console.log(e.add(1,2))}) //

---

关于静态加载，可以查看我之前写的文章：ES6之Module（上）（https://www.jianshu.com/p/7ec21511a08d）

3、动态加载的实例

class App extends Component {
  clickHandle = e => {
    Promise.all([
      import('./modueA')
    ]).then(([e]) => {
      console.log(e)
        e.add(1,2)
    });
  }
  render() {
    return (
      <div>
          <button onClick={this.clickHandle}>click</button>
      </div>
    );
  }
}

注意：动态加载不太适用于组件加载，适用于加载方法或对象，而 React.lazy() 适用于组件加载。

4、React.lazy()
用于延迟加载组件。

对比：

• 静态加载：

import Header from './Header'

render() {
  return (
    <div>
      <Header />
    </div>
  );
}

• 延迟加载（在组件渲染的时候，再去加载该组件）：

const Header=React.lazy(()=>import('./Header').then(e=>{
                                  console.log(e) //{default: ƒ, __esModule: true}
                              }))

---

注意：延迟加载组件，是需要一个渲染加载的过程的。
传统做法是使用 <Spin /> 组件，然后通过 boolean 控制 loading 组件的显示/消失

React v16.6 更新后，可以使用 <Suspense/> 组件来自定义加载的过程。

5、React 的加载组件--Suspense

import React,{Component,Suspense} from 'react'

注意：React.lazy() 不能单独使用，而必须要有一个 placeholder ui，否则会报错：

Suspense 搭配 React.lazy() 使用：

import React,{Component,Suspense} from 'react'
const Header=React.lazy(()=>import('./Header'))

render() {
  return (
    <div>
      <Suspense fallback={<div>正在加载...</div>}>
          <Header />
      </Suspense>
    </div>
  )
}

注意：Suspense 的 fallback 表示自定义加载的 UI，可以为 null，但不能不存在。

---

欢迎关注公众号：gh_042070ae6d0a ，每周分享前端干货和生活感悟！
（完）