「框架篇」React.lazy() 和 Suspense 介绍及用法

Today we’re releasing React 16.6 with a few new convenient features. A form of PureComponent/shouldComponentUpdate for function components, a way to do code splitting using Suspense and an easier way to consume Context from class components. React官网 reactjs.org

React.lazy 是什么?

React 16.6.0 引入了 React.lazy ,允许您使用新的 Suspense API 进行代码拆分。(注:React.lazy 和 Suspense 尚不可用于服务器端渲染。)

React.lazy 允许开发人员阻止 UI 渲染,直到满足预定条件。例如,您可能只想加载主页,稍后加载满足预定条件的其他部分。或者,由于 React 现在是异步的,您可能希望在用户访问之前加载内容。

React.lazy 接收一个函数的返回值作为唯一的参数传入,此函数返回一个动态 import() ,(动态 import() 语法是 ECMAScript(JavaScript) 的提议,目前不是语言标准的一部分。预计在不久的将来会被接受。)它返回一个 Promise,该 Promise 解析为我们要加载的 React 组件(这需要是模块是默认导出)。

React.lazy 允许您将动态导入呈现为常规组件。如下:

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

Suspense 是什么?

Suspense 类似一个错误捕获器,如果它包裹的组件内容没有加载,它允许我们定义一个加载指示符 fallback。fallback 可以用来定义我们在等待加载时显示的一些内容,它可以是 React 组件或者是 HTML 元素。

使用 Suspense 可以将 Suspense 组件放在动态加载组件上方的任何位置,如果动态组件未加载,则 Suspense 将从该组件开始,在组件树中向上工作,直到找到 Suspense 组件。这意味着我们可以在其他 Suspense 组件中嵌套Suspense 组件,还可以使用单个 Suspense 组件包装多个动态加载组件(Suspense 不局限与动态加载组件还可以包裹元素)。

//从react中导入lazy和Suspense
import React, { lazy, Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <div>我不是一个组件</div>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

使用 lazy 改造我们之前的例子

在这个例子(可以查看之前的文章)中我们使用了axios 结合 react 实现了一个实时搜索的功能,启动我们的应用程序,打开控制台切换到网络选项,我们会看到页面在不进行拆分时,页面会立即加载两个模块:

现在我们在项目中引入 lazy 和 Suspense 对我们的代码进行修改:

import React, { Component, Suspense, lazy } from 'react';
//使用lazy动态导入Movies组件
const Movies = lazy(() => import('./Movies'));
...
render() {
    return (
      <div>
        <input
          className="Search"
          value={this.state.value}
          onChange={e => this.onChangeHandler(e)}
          placeholder="试着输入一些文字"
        />
        <div className="ContainerInner">
          <Suspense fallback="Loading">
            {this.renderMovies}
          </Suspense>
        </div>
      </div>
    );
  }
}

我们将 Moives 组件从常规导入修改成使用 lazy 的动态导入,并且在组件外层包裹了一层 Suspense 组件。我们会看到页面最初加载时会载入两个 chunk 模块,但是当我们进行搜索操作(预定条件)时,会加载第三个 chunk 模块:

我们看到使用了 lazy 进行和 Suspense 会对我们的代码进行分片打包,在页面渲染时,会将不必要的文件分离开来,当达到预定条件时才会进行加载。这样使我们的页面全是有效加载,提升了 React 应用性能。

原文发布于微信公众号 - 前端infoQ(webinfoq)

原文发表时间:2019-03-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券