React和Flux - 何時加載數據？

Question

我正在使用react-router庫和Flux架構構建React App。

現在有一個疑問出現了。我應該預先加載所有需要的數據，還是讓每條路線加載它所需要的數據？當用戶通過編輯頁面進入應用程序時，會很奇怪，並且當他保存表單時，它會轉到對象列表，但它是空的（只有一個對象），直到數據被提取。

什麼是最好的辦法？

Answer 1

您不希望深入預加載數據，以預測用戶將要做什麼。它改進了列表屏幕的用戶體驗，但它降低了編輯屏幕的用戶體驗。我一直在那條路上。起初沒問題，但隨着需求的變化，你也開始加載這個或加載，UX真的下坡了。

在Flux中，您應該只在Action中加載數據。要初始化組件的數據，可以從componentWillMount()調用適當的操作。

如果您擔心用戶第一次導航到列表屏幕時看不到數據，您應該顯示某種加載指示器。

如果您的數據加載速度較慢，您應該實施漸進式加載方案（一次可能有5個項目）。

要獲得外觀感覺的示例，只需打開facebook.com上的主要新聞源。請注意，最初（取決於您的互聯網速度），沒有列出任何故事。你會看到故事將加載的模糊框。隨着數據加載，故事出現。他們也有逐步加載實施。請注意，當您快速向下滾動頁面時，在加載和渲染舊故事之前，您會在頁面底部看到模糊的框。