react@next — 關於 React 版本演進的一些思考

React從誕生到如今，一直在給咱們帶來各類各樣的驚喜，做爲一名React的忠實支持者，每一次的React發版都會及時去了解，這邊分享一些本身對React版本演進的思考，以及一些後續發佈計劃同步。

本文純屬我的觀點，歡迎指正討論。

版本回顧

首先，咱們看看React從16版本發佈以來，各個版本迭代的週期。從圖裏能夠看到，React逐步發佈了新的生命週期、Context API、Suspense for Code Splitting及Hooks，這些新的特性及API都在React以前公佈的RoadMap中，參考——《React 16.x Roadmap》。

自Hooks版本發佈後，經歷了6個月才發佈v16.9版本，中間不少實驗性的API變了又變，並且原本預期要發佈的Concurrent Mode及Suspense for Data Fetching都沒有出現，這裏我開始產生了疑惑。同時官方發佈一篇博客——《React v16.9.0 and the Roadmap Update》，宣佈Roadmap更新以及實驗性功能暫時從主版本內分離，官方說法是——These estimates were too optimistic, and we’ve needed to adjust them，我認爲是出於對Concurrent Mode功能的穩定性及性能還有遷移成本的考慮。

v16.9以後，版本迭代恢復了正常，差很少一個月發佈一個小版本，但基本都是以Bug Fix爲主的發佈。而且在19年10月，宣佈新增react@next和react@experience發版，以此來讓開發者嘗試新的特性。至此，全部實驗性的特徵都被放在了experience版本中，而實驗版本中最重要的就是Concurrent Mode。

React ConcurrentMode

剛剛說到ConcurrentMode，相信不少同窗都有了解，在React 16發佈之初，還引發了很多討論，能夠從知乎帖子——《如何評價React的新功能Time Slice 和Suspense？》窺見一斑。

從React 16版本開始，Fiber架構的引入，將使React具有可中斷（Interruptible）、可分片（Time Slice）、優先級渲染（Priority-based Rendering）等全新特性。可是到目前爲止，在咱們的實際使用及開發過程當中，更多的只是感覺到了「可中斷（Interruptible）」，包括Suspense for Code Splitting、componentDidCatch及Hooks等，並無將可分片（Time Slice）及優先級渲染（Priority-based Rendering）體現出來。

Time Slice這部分能夠很經典的參照下面兩個圖，相信不少同窗都見過。兩邊的調用棧對比一下，在ConcurrentMode下，能夠手動指定任務的優先級，調用棧再也不是等一整個調用過程執行完畢才響應別的操做，而是進行時間分片，在每一幀進行一次中斷，查詢是否有更高優先級的任務要處理。

經過這樣的方式，將一整個同步任務拆解按幀執行的異步任務，即便在複雜邏輯處理狀況下，也再也不直接阻塞整個任務隊列。配合優先級標記，頁面能更快響應一些開發者認爲優先級高的事件，例如用戶輸入交互、動畫交互、頁面滾動等等。這部分就不深刻講了，能夠看看下面的效果圖，有興趣的能夠參考代碼片斷。

react next

我一直很關注ConcurrentMode的發佈，可是到如今都沒有正式發佈，根據目前的狀況來看，在16版本中應該不會再出現ConcurrentMode相關的內容了。根據官方透出的消息來看，Concurrent Mode會在17版本中默認開啓，同時會提供多種模式，包含傳統的Legacy Mode、中間態的Blocking Mode以及全新的Concurrent Mode。具體特性能夠參照下圖或者點擊查看。

期待新版本的發佈，不得不說Fiber架構的升級，真的使React擁有了更多的可能性。React這一年來發布的各類API，對於React開發者來講真的太友好了，新的Context讓跨組件狀態管理變得簡單、Suspense+React.lazy讓代碼拆分變得更簡單、Hooks的發佈讓組件拆分更細粒度······同時各類漸進式的優化，讓開發者在編碼過程當中不用考慮太多細節問題，在簡單的開發理念下，構建高可用的應用。

同時我也看到了React對用戶體驗的重視，隨着Concurrent Mode發佈，可中斷（Interruptible）、可分片（Time Slice）、優先級渲染（Priority-based Rendering）等全新特性，將讓開發者更容易構建流暢的交互界面，尤爲在動畫、複雜渲染狀況，用戶交互將變得更優秀。

雖然Concurrent Mode下，無可避免會對性能形成必定影響，可是從用戶體驗的角度看，在犧牲必定性能狀況下，保證交互的高可用性，是徹底值得的。這種理念我以爲在平常的開發過程當中也能做爲一種導向，不用一味追求性能，例如添加骨架屏、Loading圖等等，都能給用戶帶來很好的體驗。

在用戶體驗的設計理念驅動下，我相信React會讓咱們看到更多驚喜。最後，放出我很喜歡的一句話，React官方提供的——Its mission is to help integrate the findings from the Human-Computer Interaction research into real UIs（它的使命是經過整合人機交互的研究成果，讓人機交互更接近真實世界）。