什么是React Lazy？
反应懒是React中的新功能，它使您可以通过代码拆分以惰性方式加载React台湾宾果28开奖，而无需任何其他外部库的帮助。延迟加载是一种技术，该技术首先涉及仅渲染所需或关键用户界面的项目，然后静默展开非关键项目。
目前，它已完全集成到核心反应库本身中。我们以前使用react-loadable来实现此目的，但现在我们在react核心中有react.lazy（）。
去年某个时候，React的团队发布了16.6.0版，它启用了一个闪亮的新功能，使我们能够非常轻松地处理延迟加载而无需第三方库的帮助。
悬念-
暂挂是惰性函数所需的台湾宾果28开奖，该函数基本上用于包装惰性台湾宾果28开奖。许多惰性台湾宾果28开奖都可以。在悬念台湾宾果28开奖的帮助下包装在一起。它具有一个后备属性，该属性接受在加载惰性台湾宾果28开奖时要呈现的react元素。
为什么惰性加载和悬念很重要？
捆绑的第一步涉及逐步调整代码台湾宾果28开奖，并将其放在一个JavaScript块下，然后传递给浏览器，但是由于我们的应用程序在不断增长，因此我们注意到捆绑包的大小非常繁琐。这会很快使您的应用程序变得非常困难，特别是速度缓慢。
借助代码拆分，可以将捆绑包拆分成较小的块，在其中可以首先加载最重要的块，然后再延迟加载每个其他次要的块。
我们还知道，在构建应用程序时，作为最佳实践，应该考虑使用移动互联网数据的用户以及互联网连接速度非常慢的用户。即使在资源被加载到DOM的暂停期间，我们的开发人员也应该始终能够控制用户体验。
反应懒入门：
根据react的官方文档，如果您使用webpack捆绑包，则已经将其配置为开箱即用。
– CRA（创建React应用）
– 下一个js
– 盖茨比
如果不是，则需要设置捆绑自己。例如，请参阅Webpack官方文档上的“安装和入门指南”。
演示-
我们将学习使用create-react-app入门工具构建一个反应应用程序，以显示2019年MTV Base的标题艺术家的姓名和专辑数量，然后在其中实现带有悬念的延迟加载。在本教程中，我们将create-react-app清理为更简单的内容，并构建了一个简单的台湾宾果28开奖供本教程使用。
– 克隆下面的存储库-
//gitlab.com/viclotana/react-lazy-load
– 解压缩文件并打开一个新终端
– 使用以下命令将项目的节点模块安装在解压缩文件的根目录中：
$ sudo npm install
– 下一步是使用以下命令启动开发服务器：
$ sudo npm start
这是我们的示例应用程序，如果您已经克隆了存储库，您将看到艺术家数据是从应用程序内的商店加载的。
您也可以自己创建一个并进行以下更改，应用程序的src文件夹应看起来像这样。
1) Artists.js
从“反应”导入React；
导入“ ./App.css”；
从“ ./store”导入艺术家；
导出默认函数Artists（）{
返回（
<>
<h1>MTV基础头条艺术家2019</h1>
{artists.map（artist =>(
<div id =“ card-body” key = {artist.id}>
<div className=”card”>
<h2>{artist.name}</h2>
<p>体裁：{artist.genre}</p>
<p>发行专辑：{artist.albums}</p>
</div>
</div>
））}</>
）;
}
2) Store.js
导出默认值[
{
id：“ 1”，
名称：“ Davido”，
国家：“尼日利亚”，
风格：“非洲流行”，
专辑：“ 2”
}，
{
id：“ 2”，
名称：“ AKA”，
国家：“南非”，
风格：“嘻哈”
专辑：“ 4”
}，
{
id：“ 3”，
name: “Seyi Shay”,
country: “Nigeria”,
风格：“ R&B”,
专辑：“ 2”
}，
{
id：“ 4”，
名称：“ Sauti Sol”，
国家：“肯尼亚”，
风格：“灵魂”，
专辑：“ 3”
}
];
3) Index.js
从“反应”导入React；
从“ react-dom”导入ReactDOM；
导入“ ./index.css”；
从“ ./艺术家”中导入艺术家；
App类扩展了React.Component {
render（）{
返回（
<div className=”App”>
<Artists />
</div>
）;
}
}
反应DOM.render（<App />，document.getElementById（'root'））;
4) App.css
.App {
文本对齐：居中；
}
h1 {
填充：30px;
}
＃card-body {
显示：inline-flex;
填充：10px;
边距：30px 30px;
边框：5像素实心rgb（93，171，207）;
border-radius：8px;
背景：浅蓝色；
}
现在让我们进一步学习如何使用react.lazy和suspense处理艺术家台湾宾果28开奖的延迟加载。
– 转到index.js文件并从如下所示的反应中导入懒惰和悬念：
从“反应”中导入{悬疑，懒惰}；
– 为了将动态导入呈现为常规台湾宾果28开奖，react文档提供了react.lazy函数语法，如下所示：
const OtherComponent = 反应.lazy（（）=>import（‘./ OtherComponent’））;
函数MyComponent（）{
返回（
<div>
<OtherComponent />
</div>
）;
}
– 使用我们的Artists台湾宾果28开奖进行尝试，我们将获得以下内容：
const Artists = 反应.lazy（（）=>import（‘./ Artists’））;
函数MyComponent（）{
返回（
<div>
<Artists />
</div>
）;
}
如果尚未加载包含Artists的模块，则在App台湾宾果28开奖呈现时，我们必须显示一些后备内容，以等待加载完成。这可以是一个悬念指示器，由悬念台湾宾果28开奖执行。以下是添加悬念台湾宾果28开奖以响应懒惰的语法。
const OtherComponent = 反应.lazy（（）=>import（‘./ OtherComponent’））;
函数MyComponent（）{
return (
<div>
<Suspense fallback={<div>Loading…</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
结合我们的艺术家台湾宾果28开奖，它变为：
const Artists = 反应.lazy（（）=>import（‘./ Artists’））;
函数MyComponent（）{
返回（
<div>
<Suspense fallback={<div>Loading…</div>}>
<Artists />
</Suspense>
</div>
）;
}
将所有内容组合在一起，您的index.js文件应类似于以下代码：
从“反应”中导入React，{lazy，Suspense}；
从“ react-dom”导入ReactDOM；
导入“ ./index.css”；
//从“ ./Artists”导入艺术家；
const Artists = lazy（（）=>import（‘./ Artists’））
App类扩展了React.Component {
render（）{
返回（
<div className=”App”>
<Suspense fallback={<h1>Still 载入中...</h1>}>
<Artists />
</Suspense>
</div>
);
}
}
反应DOM.render（<App />，document.getElementById（'root'））;
在本地主机上，它应该非常快，并且可能使发现更改变得困难。但是，您可以创建计时器帮助程序，也可以仅模拟较慢的网络，从而可以准确地显示更改的发生时间（以毫秒为单位）。
这可以通过以下方式完成：
– 在浏览器上打开开发工具
– 选择网络标签
– 单击最右边的在线选项卡以显示其他选项（预设）。
– 选择快速的3G
现在，您可以刷新浏览器，并观察延迟加载是如何发生的。
多个惰性台湾宾果28开奖
这是一个很小的台湾宾果28开奖，我们需要添加该台湾宾果28开奖以呈现标题，并查看react lazy函数如何仅使用一个暂挂台湾宾果28开奖来处理它。
在src文件夹中创建一个performers.js文件，并添加以下代码：
从“反应”导入React；
导入“ ./App.css”；
导出默认函数Performers（）{
返回（
<>
<h2>这些是MTV基本标题艺术家...</h2>
</>
）;
}
然后在index.js文件中添加惰性台湾宾果28开奖行，它现在应如下所示：
从“反应”中导入React，{lazy，Suspense}；
从“ react-dom”导入ReactDOM；
导入“ ./index.css”；
const Artists = lazy（（）=>import（‘./ Artists’））
const表演者=懒惰（（）=>import（‘./ Performers’））
App类扩展了React.Component {
render(){
return(
<div className=”App”>
<Suspense fallback={<h1>Still 载入中...</h1>}>
<Artists />
<Performers />
</Suspense>
</div>
);
}
}
反应DOM.render（<App />，document.getElementById（'root'））;
现在，这将显示悬念的占位符元素后立即显示两个延迟加载的台湾宾果28开奖。