超越react16

Dan Abramov日前在JSConf Iceland作了相關分享闡述react將來的一些特性和發展方向，主要集中在兩方面：Time Slicing(時間切片）和Suspense(懸停)

CPU Demo

一個文本框用於輸入，波浪圖顯示react app的組件渲染狀況，時鐘顯示幀與幀之間的性能，綠色優秀，紅色表示卡頓。

從這張圖能夠看到，隨着輸入的增多，時鐘出現紅色，性能也愈來愈差。主要的問題是輸入與react組件的更新是同步的，輸入文字以後當即更新，性能很是差。

解決的思路就是輸入和更新分開，即圖中的debounced。這樣的性能稍微好一點，可是任然帶來兩個問題：1. 若是組件的嵌套層次很是深，性能仍然很是差，由於react的更新是同步的。2. 用戶體驗不太好，由於這是要等全部的輸入結束後，纔會更新組件。

因此，針對上面的這些狀況，Dan帶來了異步渲染的機制，react 將來的版本支持異步渲染。

上圖表示，即便cpu慢4倍的狀況下，異步更新的性能還是很是理想。

CPU Demo表示，react 會根據優先級來判斷是否渲染。若是有些高優先級的任務如用戶輸入，渲染會暫停，把控制權還給瀏覽器，等瀏覽器完成輸入完成後，再繼續後面的工做，這個功能就叫作Time Slicing(時間切片)。

做用以下：

1. React 渲染時不阻塞線程。

2. 若是設備性能良好，感受如同步更新。

3. 若是設備性能較差，更新也是響應式的。（會讓位優先級高的內容，空閒時更新）

4. 只有渲染好後的最終狀態會展現

5. 一樣採用聲明式組件方式

IO DEMO

IO demo演示了一個電影列表和詳情頁的功能。詳情頁包括了圖片，詳情和評論。

上圖注意movieDetailsFetcher.read這個函數，是將來react提供的獲取數據的方式，提供了一個簡單的緩存，做用原理以下：

1. 在渲染方法裏，從cache取值

2. 若是緩存存在，繼續渲染

3. 若是緩存不存在，cache扔出一個promise對象

4. 當promise的狀態爲resolve,react繼續渲染。

5. 緩存會被new context API用到整個react 組件樹渲染，也就是全局的數據。

這個異步獲取數據的能夠用在render（）裏面，配合deferState方法，目前render只支持同步數據。若是在render時，發現異步請求，走上面的流程，等待數據返回，纔會繼續渲染。

所以，配合placeholder,咱們能夠採用以下的方式加強用戶體驗

1. 等詳情數據回來再展現

2. 先展現部份內容，剩下的慢慢展現

在此過程當中因爲是異步的，由於能夠隨時點擊返回按鈕返回列表。

若是圖片過大發生抖動，能夠等圖片返回後，繼續promise resolve操做，展現詳情。

代碼分割

此外，爲了提升性能，能夠在fetcher裏面import 對應模塊，作到動態加載JS。

suspence相關總結

1. 在數據準備好前能夠暫停任何狀態更新,直到數據返回。

2. 對任何組件能夠添加異步數據，不會引發堵塞。

3. 網絡快，整個組件樹ready以後更新。

4. 網絡慢，精確控制更新狀態（經過placeholder和loading來控制總體或者部分）

5.對不一樣的層級提供對應的low-level api和high-level api。

看了分享以後，感受react將來發展方向朝着更好的用戶體驗方向發展，相關的特性總結以下

1 React會根據用戶的設備和網絡狀態採起不一樣的機制

2. 若是設備好，網絡快，就能享受絲滑般的感受。

3.若是設備差，網絡慢，用戶也能獲得響應式的反饋

ps: 網易重點部門誠徵前端，若是對相關職位感興趣，請投簡歷xff1874@gmail.com