使用 React Suspense 分割代码

「React.Suspense」和在 v16.6中引入的「React.lazy()」一起增加了新的功能,允许元件在实际渲染之前等待某些东西。

开始的

要开始,你需要确保你在 React v16.6 或更高版本. 如果你正在启动一个新的项目,或者如果你正在使用一个较旧的项目,而不是在正确的版本,简单地:

1# Via npm
2$ npm install --save react react-dom
3
4# Or via Yarn
5$ yarn add react react-dom

然后,在您想要处理其他组件的懒惰加载的组件中,输入暂停和懒惰:

1import React, { lazy, Suspense } from 'react';

关于代码分割

值得注意的是,虽然暂停和懒惰允许您快速轻松地加载零部件,但如果您将整个应用程序结合到一个单一的脚本中,您可能不会看到很多好处,比如Webpack。

虽然不适用于本文,但您可以在 Webpack 文档中阅读与 Webpack 的代码分割。

「React.lazy( )」

懒惰()方法采用一个函数作为第一个参数,预计它将导入另一个组件,如下:

1const SomeComponent = lazy(() => import('./SomeComponent');

由于导入是在一个被转移到懒( )的函数内部,所以在我们实际使用该组件之前,该组件的加载不会发生,而不是热切地加载到您的文件顶部的其他导入。

「反應、暫停」

React.Suspense组件允许我们包装一个组件并指定一个倒退组件,该组件将在包装组件加载时显示:

1<Suspense fallback={<div>Loading...</div>}>
2  <SomeComponent />
3</Suspense>

当您正在加载位于大侧的组件时,或发生在导入大型库(如react-pdf或react-draft-wysiwyg)时,这尤其有益。

即使您的部件不在重量级部门,懒惰的加载也可以帮助那些可能没有最好的互联网连接的最终用户。

把一切都放在一起

为了真正获得使用React.Suspense和React.lazy()的感觉,我们将需要两个单独的文件。

让我们从我们要导入的组件开始。对于这个例子,我已经创建了一个非常简单的组件,它加载了始终 dapper Alligator.io 标志:

 1[label AlligatorioLogo.jsx]
 2import React from "react";
 3
 4function AlligatorioLogo() {
 5  const imageSource = "https://uploads.codesandbox.io/uploads/user"
 6    + "/39d6d9f6-60d2-4a60-9eb7-9250c3417bef"
 7    + "/saY6-alligatorio-logo.png";
 8
 9  return (
10    <img
11      alt="Alligator.io Logo"
12      src={imageSource}
13      width="250"
14    />
15  );
16}
17
18export default AlligatorioLogo;

下面是我们的应用程序的锅炉板代码和一点状态逻辑,以便我们可以手动触发我们组件的加载:

 1[label App.jsx]
 2import React, { Component, Fragment, lazy, Suspense } from "react";
 3import { render } from "react-dom";
 4
 5import "./styles.css";
 6
 7const AlligatorioLogo = lazy(() => import("./AlligatorioLogo"));
 8
 9class App extends Component {
10  constructor(props) {
11    super(props);
12
13    this.state = {
14      showLogo: false
15    };
16  }
17
18  onClick = () => {
19    this.setState({ showLogo: !this.state.showLogo });
20  };
21
22  render() {
23    return (
24      <div className="App">
25        <h1>React.lazy() + &lt;React.Suspense /&gt; Demo</h1>
26        <div>
27          <button onClick={this.onClick}>
28            {this.state.showLogo &&
29              <Fragment>Click to Hide the Logo</Fragment>
30            }
31            {!this.state.showLogo && (
32              <Fragment>Click to Show the Logo</Fragment>
33            )}
34          </button>
35        </div>
36        <hr />
37        {this.state.showLogo && (
38          <Suspense fallback={<div>Loading...</div>}>
39            <AlligatorioLogo />
40          </Suspense>
41        )}
42      </div>
43    );
44  }
45}
46
47const container = document.createElement("div");
48document.body.appendChild(container);
49render(<App />, container);

正如你所看到的,使用暂停和懒惰()()真的不多,因为它是多么简单,将现有系统传输到它,这不应该是一个很大的负担,特别是如果你已经把你的组件分成单独的文件。

结论

引入React.lazy()和React.Suspense是帮助减少您需要编写现代Web应用程序的锅炉板代码量的一大步。

虽然已经相当强大,但暂停并非没有它的缺点。在未来 v16 点发布的 React 路线图上,缺少的大部分是使用暂停进行数据采集的能力。

一旦这个数据采集功能可用,暂停将能够等待AJAX呼叫等事情,并在加载时显示反弹组件。

值得注意的是,暂停尚未完全准备好用于服务器端渲染。

如果你准备给‘React.Suspense’和‘React.lazy()’一个旋转,你可以转到 CodeSandbox看到这个文章中的代码在行动!