開發者現在已經可以在Npm,下載最新的開源JavaScript函式庫React 18,這個版本正式加入自動批次處理功能,和諸如startTransition等新API,還支援Suspense串流伺服器渲染。這些新功能,都是建立在React新的並行(Concurrent)渲染器之上,由於這個Concurrent React新機制,將會大幅改變開發者建構應用程式的方法,官方在2021年夏天時候,甚至成立了React 18工作組來收集社群意見,確保React生態系升級順暢。

官方解釋,並行本身並非一個新功能,而是一個幕後的機制,讓React能夠同時準備多個UI版本。React在內部以優先佇列和多重緩衝等複雜技術,來建立並行機制,讓React得以實現新功能提升使用者體驗。

Concurrent React的重要屬性是能夠中斷交易,在React 18之前版本,或是在React 18中,未啟用任何需要並行機制的功能之前,React都是以單一、不中斷的同步交易運作,簡單來說,用戶還沒在螢幕上看到結果之前,這個過程無法被中斷。

而並行渲染則不同,React在渲染更新到一半時,可以暫停再繼續渲染,甚至完全放棄整個渲染工作。React會保證即便是渲染到一半暫停,UI也會保持一致,React會等待DOM突變結束,直到整顆樹被評估完成,這項能力使得React可以在背景準備新的螢幕畫面,而不阻塞主要執行緒,因此應用程式即便處在大型渲染任務的中間,UI也能夠立即回應用戶輸入,進而提供順暢的用戶體驗。

官方表示,React 18是他們在這個新基礎建構功能的開端。以技術上來說,並行渲染是一個破壞性變化,因為並行渲染是可以中斷的,所以在啟用這項機制時,元件的行為會略有不同。目前官方已經在React 18上,測試過數千個元件,幾乎所有元件都可在啟用並行渲染時運作,但仍有一些需要小幅度更新的元件,開發者可以按照自己的步調更新支援並行機制,因為React 18的並行渲染,僅會在應用程式使用新功能的時候啟用。

React 18新加入自動批次處理功能,React會將多個狀態,更新到單一的重新渲染作業中,以獲得更好的效能,過去沒有自動批次處理,開發者只能在React事件處理程序中批次處理更新,而在預設狀態下,Promise、setTimeout、原生事件處理程序,或任何React內部事件的更新,都不會以批次處理,而在React 18中,這些更新都將可以自動批次處理。

另外,React 18還引入了過渡(Transition)的新概念,用來區分緊急和非緊急更新。緊急更新表現在直接互動像是輸入、點擊和按下等操作,非緊急的過渡更新,則是將UI從視圖過渡到另一個視圖。官方表示,之所以打字、點擊和按下等緊急更新需要立即回應,是因為對使用者來說,如果這些行為沒有立刻獲得回應,使用者會覺得應用程式發生問題,但是並非所有過渡都是相同的,因為使用者並不會期望在螢幕上看到每個中間值。

因此開發者應該將單一用戶的輸入,區分為緊急更新與非緊急過渡更新,以提供最佳的用戶體驗,開發者可以在輸入事件中,使用startTransition API,來告知React緊急與非緊急過渡更新。

官方在React 18中,還添加了對Suspense的支援,並使用並行渲染擴充其功能,開發者現在可以在React 18中結合使用Suspense與過渡API,以獲得最佳的效果。Suspense可以讓還沒準備好渲染的UI,顯示為載入狀態,來解決程式碼分割(Code-splitting)和資料擷取的問題。在這次更新中,React會推延渲染,直到應用程式載入足夠的資料,以非同步操作避免錯誤的載入狀態出現。

React 18整體的升級政策,官方希望能讓開發者的應用程式,順利在React 18上運作,因此升級並不會破壞現有程式碼,開發者可以依照自己的開發節奏,逐漸添加並行支援,並使用<StrictMode>在開發過程中發現相關錯誤。


熱門新聞

Advertisement