关于React 可装载的介绍：
为了使Web应用程序满足各种用户的各种需求，可能只需要一种类型的用户就需要更多的代码。 反应加载允许该应用程序适应和处理不同的场景和用例，从而带来新的功能。发生这种情况时，可以预期应用程序的性能会随着代码库的增长而下降。
代码拆分-
代码拆分是一种技术，其中应用程序仅在特定时间加载它需要的代码。例如，当用户导航到主页时，可能无需加载为后端仪表板提供动力的代码。通过代码拆分，我们可以确保主页的代码是唯一加载并提供最佳加载的代码。
可以在React应用程序中使用以下方式进行代码拆分 反应加载。它为我们提供了一个高阶组件，可以将其设置为在特定时间动态导入特定组件。
组件分割
在某些情况下，我们可能希望根据用户事件无条件渲染组件，例如，当用户登录帐户时。处理此问题的常用方法是利用状态-根据应用程序的登录状态来呈现组件。
我们称这种成分分裂。
下面是一个在代码中的外观示例。
const 你好 = （） => {
返回 (
<反应片段>
<h2>你好</h2>
</反应片段>
)
}
类 应用程式 延伸 反应.零件 {
州 = {
openHello: 假
}
你好 = （） => {
这个.setState（{ openHello: !这个.州.openHello }）
}
渲染（）{
返回 (
<div 班级名称=“App”>
<纽扣 onClick= {这个.你好}>
Toggle 零件
</纽扣>
{
这个.州.openHello ?
<你好 />
: 空值
}
</div>
);
}
}
反应DOM.渲染(<应用程式 />, 文件.getElementById(“root”））
考虑到这是一个基本示例，假设我们要有条件地渲染包含<h2>标题为“ 你好”。像这样：
const 你好 = （） => {
返回 (
<反应.分段>
<h2>你好</h2>
</反应.分段>
)
}
我们可以在App组件中自定义openHello状态，其初始值为false。然后，我们可以使用一个按钮来切换状态，显示或隐藏组件。我们将其放入handleHello方法中，如下所示：
类 应用程式 延伸 反应. 零件 {
state = {
openHello: 假
}
handleHello = （） => {
这个.setState（{ openHello: !这个.州.openHello }）
}
render（） {
返回 (
<div 班级名称=“App”>
<按钮onClick={这个.你好}>
Toggle 零件
</纽扣>
{
这个.州.openHello ?
<你好 />
: 空值
}
</div>
）;
}
}
让我们快速浏览一下DevTools并注意Network标签：
接下来，让我们使用折射器来使用可加载的Hello。与直接导入组件不同，我们将使用Loadable进行导入。我们将从安装react-loadable软件包开始：
##纱线，npm或滚动
纱线添加反应性
现在已将其添加到我们的项目中，我们需要将其导入到应用程序中：
进口 可装载 从 ‘react-loadable’;
现在，我们将使用Loadable创建一个“加载”组件，其外观如下所示：
const 可加载的你好 = 可装载（{
loader: （） => 进口(‘./Hello’），
loading（） {
返回 <div>载入中…</div>
}
}）
我们将一个函数作为值传递给加载器，该加载器返回创建的Hello组件。在这个例子中，我们将返回一个div元素。
{
这个.州.openHello ?
<可加载的你好 />
: 空值
}
现在，仅当通过按钮切换状态时，我们的Hello组件才会加载到DOM中。
这就是我们所说的组件拆分能力。
基于路由的拆分
现在，我们已经看到如何使用可加载项通过其他组件来加载组件。执行此操作的另一种方法是基于路由的拆分。
在这种方法中，组件被加载到当前路径上。
例如，如果用户在应用程序的主页上并单击带有/ hello路由的Hello视图，则将仅加载属于该特定路由的组件。这是在许多应用程序中处理拆分的一种相当普遍的方式，通常效果很好，尤其是在不太复杂的应用程序中。
这是定义的基本示例。在应用中路由。在以下情况下，我们有两条路线。
1) 主页（/）和
2) 你好你好）
类 应用程式 延伸 零件 {
render（） {
返回 (
<div 班级名称=“App”>
<浏览器路由器>
<div>
<链接到=“/”>首页</链接>
<链接到=“/hello”>你好</链接>
<开关>
<路线确切路径=“/” 零件={首页} />
<路线路径=“/hello” 零件={你好} />
</开关>
</div>
</浏览器路由器>
</div>
）;
}
}
碰巧的是，即使我们只想渲染Hello，所有组件也会在用户切换路径时渲染。基于该路径的组件。当然，如果我们谈论的是几个组件，这并不是什么大问题，但是较大的组件可能会导致其他问题。
通过使用Loadable，我们可以通过为每个对象创建一个可加载组件来仅导入所需的组件：
const 可加载的你好 = 可装载（{
loader: （） => 进口(‘./Hello’），
loading（） {
返回 <div>载入中…</div>
}
}）
const 可加载首页 = 可装载（{
loader: （） => 进口(‘./Home’），
loading（） {
返回 <div>载入中…</div>
}
}）
类 应用程式 延伸 零件 {
render（） {
返回 (
<div 班级名称=“App”>
<浏览器路由器>
<div>
<链接到=“/”>首页</链接>
<链接到=“/hello”>你好</链接>
<开关>
<路线确切路径=“/” 零件={可加载首页} />
<路线路径=“/hello” 零件={可加载的你好} />
</开关>
</div>
</浏览器路由器>
</div>
）;
}
}
造成的任何错误和延迟如何处理？
如果任何导入的组件快速加载，则无需刷新“正在加载”的组件 . 值得庆幸的是，loadable能够延迟显示加载组件。这有助于防止它在感觉很傻的位置显示得太早，而在经过一段我们希望看到它已加载的显着时间段之后显示它。
为此，我们的示例可加载组件应如下所示：
const 可加载的你好 = 可装载（{
loader: （） => 进口(‘./Hello’），
loading: 装载机,
delay: 300
}）
现在，让我们向Loader组件添加一个条件，告诉它仅在我们设置的300ms延迟过去之后才显示加载器。
const 装载机 = (道具) => {
如果 (道具.pastDelay) {
返回 <h2>载入中…</h2>
} 其他 {
返回 空值
}
}
如果执行此操作，则加载程序组件仅在Hello组件显示。 300ms后将不会显示。
反应加载器。还给我们提供了一个错误道具，可以用来返回。遇到的错误。
const 装载机 = (道具) => {
如果 (道具.错误) {
返回 <div>不好了, 出了些问题!</div>;
} 其他 如果 (道具.延迟) {
返回 <h2>载入中…</h2>
} 其他 {
返回 空值;
}
}
对我们来说重要的是要知道我们实际上是在组合延迟和错误处理。一起。
