访问react应用程序时,是否立即下载了所有组件?

时间:2018-01-11 00:01:35

标签: php reactjs

我试图绕过React应用程序。作为一名PHP开发人员,我习惯于根据请求的路由模拟下载的模块。似乎在React应用程序中,所有组件都是在初始请求时下载的,然后只需等待调用并传递其所需的数据。这是对的吗?

1 个答案:

答案 0 :(得分:0)

确定是否所有组件都作为“初始请求”的一部分下载,实际上并不是React作为框架决定的内容。这完全取决于你。

这种情况下的React组件实际上由用于呈现该组件的JavaScript代码表示。如果要将所有JavaScript代码捆绑到单个文件 app.js 中,然后在HTML中添加// ...snip... namespace UWPFocusTestApp { sealed partial class App : Application { // ...snip... protected override void OnLaunched(LaunchActivatedEventArgs e) { // ...snip... if (rootFrame == null) { // ...snip... // Place the frame in the current Window Window.Current.Content = rootFrame; #region WORKAROUND if (AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Mobile") { InputPane.GetForCurrentView().Showing += InputPane_Showing; } #endregion } // ...snip... } #region WORKAROUND private void InputPane_Showing(InputPane sender, InputPaneVisibilityEventArgs args) { // we only need to hook once InputPane.GetForCurrentView().Showing -= InputPane_Showing; var frame = (Frame)Window.Current.Content; // Find root ScrollViewer DependencyObject cNode = frame; while (true) { var parent = VisualTreeHelper.GetParent(cNode); if (parent == null) { break; } cNode = parent; } var rootScrollViewer = (ScrollViewer)cNode; // Hook ViewChanged to update scroll offset bool hasBeenAdjusted = false; rootScrollViewer.ViewChanged += (_1, svargs) => { // once the scroll is removed, clear flag if (rootScrollViewer.VerticalOffset == 0) { hasBeenAdjusted = false; return; } // if we've already adjusted, bail. else if (hasBeenAdjusted) { return; } var appBar = ((Page)frame.Content)?.BottomAppBar; if (appBar == null) { return; } hasBeenAdjusted = true; rootScrollViewer.ChangeView(null, rootScrollViewer.VerticalOffset + appBar.ActualHeight, null); }; } #endregion // ...snip... } } 对该文件的引用,那么答案是肯定的。

如果您的应用程序由许多组件组成,并且每个页面仅显示此组件池的一小部分,那么使用code splitting策略可能有助于您的应用程序的性能,页面仅加载与该特定页面的内部工作相关的JavaScript。然后,当用户在应用程序中导航时,它会下载越来越多的支持代码,以便它可以正确地呈现/计算用户尝试查看/执行的任何操作。