React 的將來：Time Slicing 和 Suspense

本文轉自 FEPulse 公衆號（微信搜索 FEPulse，每日精選一條國內外最新前端資訊，爲你把握前端脈搏）。

JSConf Iceland 大會於 3.1 - 3.2 在冰島舉行，在會中，React 核心團隊的 Dan Abramov 發表了名爲 「Beyond React 16」 的演講，描述了對 React 將來的展望，本文根據 Dan 的演講整理。

React 做爲一個通用的框架，須要考慮各類網絡情況（網速有快有慢）以及各類設備類型（CPU 性能有好有壞），而框架開發者的一個重要使命就是幫助開發者們開發在各類狀況下用戶體驗都很好的應用程序。

影響用戶體驗的因素主要能夠歸爲兩大類：計算能力（Computing Power）和網絡速度（Network Speed），他們對應計算設備的 CPU 和 IO 能力。在 React 中，CPU 主要影響 DOM 元素建立和更新的效率，而 IO 則影響獲取數據和懶加載的代碼。下面 Dan 用了兩個 Demo 來展現 React 在這兩個方面的嘗試。

Demo 1

第一個例子，由一個輸入框和下面的三個圖表組成，當輸入的內容越複雜，下面的圖表也愈來愈複雜。

爲了更直觀地看到頁面刷新的效率，Dan 還寫了一個時鐘，綠色表示頁面刷新時幀與幀之間間隔的時間很短，而顏色越深則表示間隔時間越長，頁面卡頓感越強，用戶體驗天然也越差。

這種場景中，提高用戶體驗的一個經典的作法是 Debounce（Throttle 相似），即等用戶暫停輸入後再刷新頁面，對應的 Demo 以下：

但這麼作用戶體驗上也是有缺陷的，若是用戶的 CPU 很強勁，那也不得不等暫停輸入後纔看到結果。那有沒有更好的解決方案呢？有的，Dan 給了一種異步刷新的方案，先看圖：

引用 Dan PPT 中的一句話，用來體現這種異步方案的精髓。

We've built a generic way to ensure that high-priority updates like user input don't get blocked by rendering low-priority updates.

Dan 稱這種特性爲 「Time Slicing」，主要包括如下幾點：

Demo 2

第二個 Demo 是一個電影信息展現的應用，選擇一個電影，點擊進入可查看電影的詳情和評論。在後面的演示中，Dan 經過一步步修改這個 Demo 的代碼來讓咱們理解 React 在網絡方面如何提高用戶體驗的。

首先，Dan 將數據從硬編碼改爲了從網絡獲取。代碼以下：

在上面這段代碼中，當 React 渲染 MovieDetails 組件時，會先看對應電影 ID 的詳情有沒有被緩存，由於是第一次，電影詳情信息還沒被緩存，因此須要去網絡拉取，下面高能！React 會阻止渲染過程，直到數據被拉取回來！而咱們須要作的，僅僅告訴 React，從電影列表頁到電影詳情頁的過程是個異步過程便可。代碼以下：

這樣修改事後，下面的動圖展現了這種異步過程：點擊一個電影，React 去網絡拉取對應電影的詳情數據，等數據拉取回來後，React 再將頁面渲染出來。

同時，頁面還保持良好的可交互性，點擊一個電影以後緊接着用戶也能夠點擊其餘的電影。

上面的修改僅僅模擬了 1s 的網絡延遲，若是延遲更長咋辦，用戶點擊了一個電影，發現頁面像卡死了通常，用戶體驗確定不好。Dan 緊接着又對代碼作了修改：使用一個叫 「Placeholder」 的組件包裹即將要渲染的異步組件，當組件在加載的過程當中，Placehodler 會顯示一個「安慰劑」。

一樣的，這個過程界面仍然保持着良好的交互性，當頁面在轉圈時，用戶能夠選擇返回。

上面的修改中，只有一個電影詳情數據須要從網絡獲取，若是有多個數據須要從網絡獲取，那麼 React 能夠選擇等全部數據都返回後顯示最終的頁面，也能夠選擇優先展現先獲取到的數據。

除了在詳情頁中展現安慰劑，也能夠在電影列表處展現，這須要經過一個叫 Loading 的組件來實現，Loading 與 Placehodler 同樣，是一個將來的特性。

除此之外，還可使用 Code Splitting 來優化用戶體驗。但點擊一個電影時，再去拉取跟電影詳情頁相關的代碼。這裏仍是使用將來提供的 createFetcher 接口來實現 Code Splitting。

運行代碼，點擊一個電影，會發現 Network 中新拉下來一個叫 「1.chunk.js」 的文件。

最後，Dan 還作了一個用戶體驗方面的優化，目前爲止的 Demo 中，打開頁面時，電影海報可能沒加載出來（從上面一張動圖中也能夠看出來），因此 Dan 作了優化，須要等圖片加載完成後，頁面才能顯示。這裏的細節再也不詳述，固然這也是用 createFetcher 實現的。

到這裏，Demo 2 就結束了。Dan 用一句話歸納了這個新特性：

We've built a generic way to suspend rendering while they load asynchronous data.

Dan 稱這個新特性爲 「Suspense」，主要包括如下幾點：

這兩項新的特性聽說將在今年發佈，是否是很期待呢？你對 Timing Slicing 和 Suspense 又有什麼見解呢？歡迎留言。

最後，再次邀請你們關注咱們的公衆號 FEPulse，第一時間獲取咱們精心整理的最新的前端資訊。