React和Flux - 何时加载数据？

Question

我正在使用react-router库和Flux架构构建React App。

现在出现了疑问。我应该预先加载所有需要的数据，还是让每条路线加载所需的数据？当用户通过编辑页面输入应用程序时会很奇怪，当他保存表单时，它会转到对象列表但它是空的（只有一个对象），直到获取数据为止。

最好的方法是什么？

Answer 1

您不希望深入预加载数据，以预测用户将要执行的操作。它改进了列表屏幕的用户体验，但它降低了编辑屏幕的用户体验。我一直走在那条路上。一开始很好，但随着需求的变化，你开始也加载或加载它，用户体验真的走下坡路。

在Flux中，您应该只在Action中加载数据。要初始化组件的数据，您可以从componentWillMount()。

调用相应的操作

如果您担心用户第一次导航到列表屏幕时没有看到任何数据，您应该显示某种加载指示符。

如果您的数据加载缓慢，您应该实施渐进式加载方案（一次可能有5个项目）。

对于外观示例，只需打开facebook.com上的主要新闻Feed即可。请注意，最初（取决于您的互联网速度），没有列出故事。您会看到故事将加载的模糊框。随着数据加载，故事出现。他们还实施了渐进式加载。请注意，当您向下滚动页面（快速）时，您会在加载和呈现较旧的故事之前在页面底部看到模糊的框。