我试图绕过React应用程序。作为一名PHP开发人员,我习惯于根据请求的路由模拟下载的模块。似乎在React应用程序中,所有组件都是在初始请求时下载的,然后只需等待调用并传递其所需的数据。这是对的吗?
答案 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。然后,当用户在应用程序中导航时,它会下载越来越多的支持代码,以便它可以正确地呈现/计算用户尝试查看/执行的任何操作。