lazy和suspense

发表于 分类于
Portals 提供了一个最好的在父组件包含的DOM结构层级外的DOM节点渲染组件的方法...

lazy和suspense

React.lazy定义

  • React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。本质就是懒加载

为什么要进行代码分割？

  • 当你的程序越来越大，代码量越来越多。一个页面上堆积了很多功能，也许有些功能很可能都用不到，但是一样下载加载到页面上，所以这里面肯定有优化空间。就如图片懒加载的理论。

实现原理

  • 当 Webpack 解析到该语法时，它会自动地开始进行代码分割(Code Splitting)，分割成一个文件，当使用到这个文件的时候会这段代码才会被异步加载。

解决方案

在 React.lazy 和常用的三方包 react-loadable ，都是使用了这个原理，然后配合webpack进行代码打包拆分达到异步加载，这样首屏渲染的速度将大大的提高。

由于 React.lazy 不支持服务端渲染，所以这时候 react-loadable 就是不错的选择。

如果在 App 渲染完成后，包含 OtherComponent 的模块还没有被加载完成，我们可以使用加载指示器为此组件做优雅降级。这里我们使用 Suspense 组件来解决。

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
33
34
35
36
import React, {Component,Suspense} from 'react';
// import NowPlaying from "./components/NowPlaying";
// import CommmingSoon from "./components/CommmingSoon";
const NowPlaying = React.lazy(() =>import('./components/NowPlaying'))
const CommmingSoon = React.lazy(() =>import('./components/CommmingSoon'))
class App extends Component {
  state ={
    type:1
  }
  render() {
    return (
        <div>
          <button  onClick={() => {
            this.setState({
              type:1
            })
          }}>正在热映</button>
          <button onClick={()  => {
            this.setState({
              type:2
            })
          }}>即将上映</button>
          <Suspense fallback={<div>正在加载。。</div>}>
            {
              this.state.type === 1 ? <NowPlaying></NowPlaying>
                  :<CommmingSoon></CommmingSoon>
            }
          </Suspense>


        </div>
    );
  }
}

export default App;