React推出了一組新的實驗性功能並行模式(Concurrent Mode),讓React應用程式可以保持回應性,並且適當地調整裝置功能和網路速度。

官方解釋,React在內的所有UI函式庫,目前的運作方式是一旦開始渲染更新,包括創建一個新的DOM節點,以及執行在元件中的程式碼,都無法中斷工作執行,這稱為阻塞式渲染(Blocking Rendering)。實際案例像是在一個可過濾的產品列表,當使用者輸入的時候,每一次鍵盤輸入可能都會讓UI更新卡卡的,這是由於更新產品列表,必須執行創建新的DOM節點,或是由瀏覽器執行布局等工作所造成。

開發者可以透過改變更新列表的時機等技巧,來最大程度降低這種UI更新不順暢的感覺,但是在低階的裝置中,不順的使用體驗總是無可避免,而造成這種情況的根本原因便是,React開始渲染工作後無法被中斷,因此瀏覽器無法在使用者按下鍵盤後,立即更新文字輸入。

而在並行模式中,渲染能夠被中斷不會被阻塞,可從根本解決這個問題,也就是說,當使用者按下另一個鍵盤按鍵時,React不需要阻擋瀏覽器更新文字輸入,而是讓瀏覽器重新繪製輸入更新,然後繼續渲染存在記憶體中的更新列表,渲染完成後,React更新DOM,接著將更新顯示在螢幕上。

官方表示,並行模式就像是在渲染工作,採用Git程式碼版本控制的概念,在沒有版本控制的時候,開發團隊不能同時修改一份文件,必須等待別人修改完畢,才能依序修改,但是並行模式讓渲染工作採取像是版本控制中的分支形式,React在分支上準備更新工作,並可以隨時放棄分支上的工作,或是在分支中切換。

並行模式除了能夠改善使用者體驗之外,還具有潛力可實作過去無法提供的功能。目前並行模式還在實驗階段,有極大可能會有功能上的改變,尚未成為React穩定版本的一部分,但開發者可以先行試用。


Advertisement

更多 iThome相關內容