反应，异步加载具有不同组件的多个部分/视图

React, async loading for multiple sections/views with different components

本文关键字：个部 视图 组件 异步 加载 反应      更新时间：2023-09-26

我在考虑构建具有多个页面/视图(仍然是SAP(的React应用程序的最佳方法时遇到了问题。

假设我们有一个简单的应用程序，其中包含 4 个主要部分(页面(：仪表板、用户、统计信息、评论。每个部分都有不同的组件(想想反应组件(。例如，注释部分将具有如下所示的层次结构： 

CommentsSection
- CommentsQueue
-- Comment
--- Text
--- Buttons
- CommentsApproved
--Comment
--- Text
--- Buttons

例如，在像 angular 这样的框架中，4 个主要部分将被分成多个部分，并根据要求加载到 ng 视图中，并在里面有各自的组件。登陆主页时，应用程序将仅加载仪表板视图，当用户单击导航项时，所选路线(即.app/users或app/users/：id(将触发，并且应用程序将加载所需的"模板视图部分"(无需刷新浏览器(。

现在就 React 而言，这将如何发生？ 似乎所有视图及其所有组件都需要在浏览器化的 JS 文件中可用，然后应用程序可以更新 DOM。

这似乎非常错误，因为我们会在第一次加载中加载所有部分，即使用户不需要访问该部分。当然，我们可以将其与服务器上的路由分开，并且仅根据路由为页面提供组件，但这需要浏览器刷新，例如在 Angular 中，由于视图是异步加载的，因此无需浏览器刷新即可发生。

问题是，这种异步加载如何在基于 React 的应用程序中发生？

我认为有

几种不同的方法可以解决这个问题，我将解释我目前用于我的工作和副项目的方法。

我们没有使用浏览器化，而是使用一个名为webpack(https://github.com/webpack/webpack(的模块捆绑器。webpack的优点在于它类似于Browserify，但可以将您的应用程序拆分为多个"捆绑包"。这很棒，因为如果我们有多个组件/视图，用户只需下载该特定视图所需的功能，而无需最初下载所有内容。它允许按需下载反应组件及其依赖项。

Pete Hunt 写了一篇文章，深入探讨了 webpack 在与 React 一起使用时的好处(包括如何异步加载 react 组件(，以及它与 Browserify 和现代构建工具(如 Grunt/Gulp： https://github.com/petehunt/webpack-howto(的相似之处/不同

之处。

我在这里描述了一个使用 webpack 的解决方案： http://blog.netgusto.com/asynchronous-reactjs-component-loading-with-webpack/

基本上：

    使用
  1. require.ensure([], cbk) 定义代码块;在 CBK 中，使用 require() 同步加载包
    2. 在主机组件中
  2. ，在 componentWillMount() 中加载异步组件，并在主机组件状态下进行设置。
    3. 在
  3. 主机组件渲染中使用它，当在状态上定义时
相关文章：