Question

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

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

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

在像角度这样的框架中，4个主要部分将被拆分为部分，并根据请求加载到ng视图中，其中各自的组件位于其中。登陆主页时，应用程序只会加载仪表板视图，当用户点击导航项时，所选路线（即app / users或app / users /：id）将触发，应用程序将加载所需的“ template-view-partial“（没有浏览器刷新）。

现在就React来说，这会怎么样？似乎所有视图和所有组件都需要在浏览器化的JS文件中可用，然后应用程序可以更新DOM。

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

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

Answer 1

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

我们使用名为webpack（https://github.com/webpack/webpack）的模块捆绑器，而不是使用browserify。关于webpack的好处在于它与Browserify相似，但可以将您的应用分成多个捆绑包＆＃39;。这很好，因为如果我们有多个组件/视图，用户只需下载特定视图所需的功能，而无需最初下载所有内容。它允许按需下载反应组件及其依赖项。

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

Answer 2

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

本质上：

使用require.ensure([], cbk)来定义代码块;在cbk中，使用require()
，在componentWillMount()中加载异步组件，并在主机组件状态中设置。
在状态

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

2 个答案: