去年，React 团队发布了版本 16.6.0，其中包含了一个全新的功能，它可以在不使用第三方库的情况下简化懒加载的处理方式。
让我们看看如何在你的应用程序中利用这个功能，以提高性能并为用户构建更好的体验。
像使用 Bit 这样的工具将组件组织到集合中非常有用。然后，你可以在任何你想要的应用程序中共享和使用你的组件，以加快开发速度并保持你的代码DRY。下面是链接：
Component Discovery and Collaboration · Bit
什么是 React.lazy()
它是 React 中的一个新函数，可以通过代码拆分懒加载 React 组件，无需任何额外的库来帮助。懒加载是一种先渲染必需或关键用户界面项，然后悄悄地展开非关键项的技术。现在它已经完全集成到 React 核心库中。我们以前使用 react-loadable 来实现这一点，但现在我们可以在 React 核心中使用 react.lazy()。
Suspense
Suspense 是 lazy 函数需要的一个组件，主要用于包装懒加载的组件。多个懒加载的组件可以被包装在 Suspense 组件中。它接受一个 fallback 属性，该属性接受你想要作为懒加载组件加载时呈现的 React 元素。
为什么懒加载（和 Suspense）很重要
首先，打包涉及将我们的代码组件按顺序对齐并将它们放在一个 JavaScript 块中，然后将其传递到浏览器中；但随着我们的应用程序的增长，我们会发现打包变得非常庞大。这可能会使使用你的应用程序非常困难，尤其是缓慢的情况下。 通过代码拆分，打包可以拆分为更小的块，其中最重要的块可以首先加载，然后每个其他辅助块都可以懒加载。
此外，在构建应用程序时，我们知道作为最佳实践，应该考虑使用移动互联网数据的用户和其他使用非常缓慢的互联网连接的用户。我们作为开发人员应该始终能够在资源加载到 DOM 期间控制用户体验，即使在暂停期间。
入门
根据 React 官方文档，如果你使用：
- CRA（create react app）
- Next js
- Gatsby
你已经配置好了 webpack 打包工具，可以直接使用。
如果没有，你需要自己设置打包工具。例如，可以参考 Webpack 官方文档的 Installation 和 Getting Started 指南。
演示
我们将构建一个 React 应用程序，它显示 MTV Base 2019 年的头条艺术家的名称和专辑数量，并使用 create-react-app 起始工具实现懒加载和 suspense。我已经将 create-react-app 精简到了更简单的形式，并构建了一个简单的组件，我们将在本教程中使用它。
- 克隆下面的存储库：
Nwose Lotanna / react-lazy-load
- 解压缩文件并打开终端。
- 在未压缩文件的根目录中使用以下命令安装项目的 node 模块：
$ sudo npm install
- 使用以下命令启动开发服务器：
$ sudo npm start
样例应用程序
这是我们的简单应用程序，如果你克隆了存储库，你会看到艺术家数据从应用程序内部的存储中加载。
或者你可以自己创建一个并进行以下更改，你的应用程序的 src 文件夹应该如下所示：
- Artists.js
import React from ‘react’;import ‘./App.css’;import artists from “./store”;export default function Artists(){ return ( <> <h1>MTV Base Headline Artists 2019</h1> {artists.map(artist =>( <div id=”card-body” key={artist.id}> <div className=”card”> <h2>{artist.name}</h2> <p>genre: {artist.genre}</p> <p>Albums released: {artist.albums}</p> </div> </div> ))} </>);}
- Store.js
export default [{ id: “1”, name: “Davido”, country: “Nigeria”, genre: “Afro-Pop”, albums: “2”},{ id: “2”, name: “AKA”, country: “South-Africa”, genre: “Hip-Hop”, albums: “4”},{ id: “3”, name: “Seyi Shay”, country: “Nigeria”, genre: “R&B”, albums: “2”},{ id: “4”, name: “Sauti Sol”, country: “Kenya”, genre: “Soul”, albums: “3”}];
- Index.js
import React from ‘react’;import ReactDOM from ‘react-dom’;import ‘./index.css’;import Artists from ‘./Artists’;class App extends React.Component { render(){ return( <div className=”App”> <Artists /> </div> ); }}ReactDOM.render(<App />, document.getElementById(‘root’));
4._ App.css_
.App { text-align: center;}h1 { padding: 30px;}#card-body { display: inline-flex; padding: 10px; margin: 30px 30px; border: 5px solid rgb(93, 171, 207); border-radius: 8px; background: lightblue;}
现在让我们看看如何使用 react.lazy 和 suspense 处理艺术家组件的懒加载。
- 转到 index.js 文件并像这样从 React 导入 lazy 和 suspense：
import { Suspense, lazy } from 'react';
- 要将动态导入呈现为常规组件，React 文档给出了 react.lazy 函数语法，如下所示：
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<OtherComponent />
</div>
);
}
- 尝试使用我们的 Artists 组件，我们将得到以下结果：
const Artists = React.lazy(() => import('./Artists'));
function MyComponent() {
return (
<div>
<Artists />
</div>
);
}
如果在我的 App 组件渲染时尚未加载包含 Artists 的模块，则必须在等待其加载时显示一些回退内容。这可以是由 suspense 组件带来的加载指示器。以下是向 react.lazy 添加 suspense 组件的语法：
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
对于我们的艺术家组件，这变成了：
const Artists = React.lazy(() => import('./Artists'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<Artists />
</Suspense>
</div>
);
}
将所有内容组合在一起，你的 index.js 文件应该像这样：
import React, { lazy, Suspense } from ‘react’;import ReactDOM from ‘react-dom’;import ‘./index.css’;// import Artists from ‘./Artists’;const Artists = lazy(() => import(‘./Artists’))class App extends React.Component { render(){ return( <div className=”App”> <Suspense fallback={<h1>Still Loading…</h1>}> <Artists /> </Suspense> </div> ); }}ReactDOM.render(<App />, document.getElementById(‘root’));
在本地主机上，它应该非常快，你可能无法发现变化。但是，你可以创建一个计时器助手或模拟较慢的网络，以毫秒为单位准确地显示更改。可以通过以下方式完成：
- 在浏览器上打开开发工具
- 选择网络选项卡
- 单击右侧的在线选项卡以显示其他选项（预设）
- 选择快速 3G开发工具
现在你可以刷新浏览器，观察懒加载是如何发生的...
仍在加载...
多个懒加载组件
让我们快速添加一个渲染标题的小组件，看看react.lazy函数如何使用一个suspense组件处理它。
在你的src文件夹中创建一个_performers.js_文件，并添加以下代码:
import React from ‘react’;import ‘./App.css’;export default function Performers(){ return ( <> <h2>These are the MTV Base Headline Artists...</h2> </> );}
然后在_index.js_文件中添加懒加载组件行，它现在应该是这样的:
import React, { lazy, Suspense } from ‘react’;import ReactDOM from ‘react-dom’;import ‘./index.css’;const Artists = lazy(() => import(‘./Artists’))const Performers = lazy(() => import(‘./Performers’))class App extends React.Component { render(){ return( <div className=”App”> <Suspense fallback={<h1>Still Loading…</h1>}> <Artists /> <Performers /> </Suspense> </div> ); }}ReactDOM.render(<App />, document.getElementById(‘root’));
这应该在suspense元素渲染后一次显示出两个懒加载组件。
两个懒加载组件在一个suspense中加载
这与loadable不同，后者必须为每个懒加载组件呈现加载元素。
⚠️ 重要通知
React.lazy和suspense尚不适用于服务器端渲染。如果你想在服务器渲染的应用程序中进行代码拆分，强烈建议使用Loadable Components。它有一个很好的指南，用于服务器端分割捆绑包。
结论
我们已经看到如何使用react提供的懒加载和suspense组件来懒加载组件。上面的示例与这些新功能带来的众多可能性相比非常基础。
评论(0)