跳到内容
保持联系
印度班加罗尔
[电子邮件 protected]
电话:+91 8919786847
工作查询
[电子邮件 protected]
电话:+91 8919786847
30分钟阅读

反应可加载:这里’您需要知道的一切

  1. 首页
  2. 反应.js
  3. 反应可加载:这里’您需要知道的一切

关于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>

            } 其他 {

                        返回 空值;

            }

}

 

 对我们来说重要的是要知道我们实际上是在组合延迟和错误处理。一起。 

 

作者头像
QuikieApps
//www.qinheli.com.cn/blog
下一篇文章
懒惰反应:这里’关于它的一切无所适从

最近的帖子

QuikieApps
张贴者 QuikieApps
2020年11月2日
QuikieApps
张贴者 QuikieApps
2020年11月2日

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

我们使用cookie为您提供最佳体验。
Cookie政策