lazyLoad:React中的组件懒加载案例及注意点

1. 什么叫懒加载？

   懒加载：随用随载。即在需要的时候才进行加载。

2. 为什么要设置懒加载？

     React和Vue都是单页面应用。

    在单页应用中，如果没有设置懒加载，webpack打包后的文件就会很大；从而造成进入首页时，需要加载的资源过多，时间过长，不利于用户体验。

    运用懒加载，就则可以将页面进行划分，在需要的时候加载对应的页面。可以有效的分担首页所承担的加载压力，减少首页加载用时。

3. 案例演示

注意点1：

    react是一种按需引入的机制，所以在使用时需要从react核心库中解构出 lazy 和 Suspense。

   lazy函数：用于实现组件的懒加载式引入。

   Suspense：用于在 因网络延迟等而导致的组件不能快速的加载到页面 时出现的提示。

注意点2：如果不使用Suspense，将会出现如下的错误提示：

案例具体代码如下：App.jsx

import React, { Component, lazy, Suspense } from 'react'
// List组件 和 Search组件
const List = lazy( () => import('./components/List'))
const Search = lazy( () => import('./components/Search'))

export default class App extends Component {

  render() {
    return (
      <div>
        {/* 在组件未加载出来时，页面会显示：loading...... */}
        <Suspense fallback = { <h1>loading......</h1> }>
          <List/>
          <Search/>
        </Suspense>
      </div>
    )
  }
}