Suspense & Lazy
文章目录

React: Suspense & Lazy

2019-09-16 暂时不推荐产品部分使用, 仅值得实验性研究。

Suspense

Suspense 主要解决的就是网络 IO 问题。网络 IO 问题其实就是我们 现在用 Redux+saga 等等一系列乱七八糟的库来解决的「副作用」 问题。Suspense 的特性:

  1. 内部一般会出现 Promise
  2. 内部所有组件 全部 Resolved 之后才会显示。1. 内部组件没有加载完成或者抛出错误的时候显示对应的 fallback 的内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import React, { Suspense } from 'react'


let data = ''
let promise = ''

// 刚开始 data 和 promise 都为空, 那么就新建一个 promise
// promise 在两秒钟之后完成, 并且同时给 data 设置了一些数据。function requestData() {
  if (data) return data
  if (promise) throw promise
  promise = new Promise(resolve => {
    setTimeout(() => {
      data = 'Data resolved'
      resolve()
    }, 2000)
  })
  throw promise 
}

function SuspenseComp({
  const data = requestData() // 这里进行了异步请求

  return <p>{data}</p>
}

// 如果上方的延时请求没有完成的情况下,就会显示一个 fallback
export default () => (
  <Suspense fallback="loading data">
    <SuspenseComp />
    <LazyComp />
  </Suspense>
)

Lazy

1
2
3
4
5
6
7
8
9
10
11
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent({
  return (
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

主要是上方的 React.lazy() 的延时导入方法

几个特性:

  1. 延时导入
  2. 打包的时候会独立出一个 chunk 文件

TODO: lazy 模式导入失败的 Error Handling