React 18完善並行機制，加入自動批次處理、過渡API新功能

開發者現在已經可以在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>在開發過程中發現相關錯誤。