React.JS v18.0釋出

banq發表於2022-03-30
ReactJS

最新的主要版本包括開箱即用的改進，如自動批處理、startTransition 等新 API，以及支援 Suspense 的流式伺服器端渲染。

React 18中的許多功能都是建立在我們新的併發渲染器之上的，這是一個幕後的變化，釋放了強大的新功能。併發React是可選的--只有當你使用併發功能時才會啟用--但我們認為它將對人們構建應用程式的方式產生重大影響。

我們花了數年時間研究和開發對React併發的支援，我們還特別注意為現有使用者提供一個漸進的採用路徑。

併發本身並不是一個功能。它是一種新的幕後機制，使React能夠同時準備多個版本的UI。你可以把併發看作是一個實現細節--它的價值在於它所解鎖的功能。
React在其內部實現中使用了複雜的技術，比如優先順序佇列和多重緩衝。但你不會在我們的公共API中看到這些概念。
當我們設計API時，我們試圖向開發者隱藏實現細節。作為一個React開發者，你專注於你想要的使用者體驗，而React處理如何提供這種體驗。


自動批處理
批處理是指React將多個狀態更新分組到一個重新渲染中，以獲得更好的效能。如果沒有自動批處理，我們只對React事件處理程式中的更新進行批處理。預設情況下，React不會對promises、setTimeout、本地事件處理程式或任何其他事件中的更新進行批處理。有了自動批處理，這些更新將被自動批處理。

  

Transitions
過渡transition 是React的一個新概念，用於區分緊急和非緊急更新。

立急更新反映了直接的互動，比如打字、點選、按壓等等。像打字、點選或按壓這樣的緊急更新，需要立即響應，以符合我們對物理物件行為方式的直覺。否則他們就會感覺 "不對勁"。
然而，過渡是不同的，過渡transition更新則是將使用者介面從一個檢視過渡到另一個檢視。因為使用者並不期望在螢幕上看到每個過渡過程的中間值。

 

Suspense
在React 18中，你可以開始使用Suspense在Relay、Next.js、Hydrogen或Remix等有意見的框架中進行資料獲取。使用Suspense進行特別的資料獲取在技術上是可行的，但仍不建議作為一般策略。
如果元件樹的某一部分還沒有準備好被顯示，暫停讓你宣告性地指定它的載入狀態。

<Suspense fallback={<Spinner />}>
  <Comments />
</Suspense>


Suspense使 "UI載入狀態 "成為React程式設計模型中的第一類宣告性概念。這讓我們可以在它上面建立更高層次的功能。

 

新的客戶端和伺服器渲染API
在這個版本中，我們利用機會重新設計了我們為客戶端和伺服器上的渲染所暴露的API。這些變化允許使用者繼續使用React 17模式下的舊API，同時升級到React 18的新API。

  • React DOM客戶端

這些新的API現在都是從react-dom/client匯出的。
  • createRoot。新的方法來建立一個根來渲染或解除安裝。使用它來代替ReactDOM.render。沒有它，React 18的新功能就不能工作。
  • hydrateRoot: 新的方法來給伺服器渲染的應用程式注入水分。使用它代替ReactDOM.hydrate與新的React DOM Server APIs一起使用。沒有它，React 18的新功能就不能工作。

createRoot和hydrateRoot都接受一個新的選項，叫做onRecoverableError，以防你想在React從渲染或水化過程中的錯誤中恢復過來時得到通知，以便記錄。預設情況下，React會使用reportError，或者在舊的瀏覽器中使用console.error。
  • React DOM伺服器

這些新的API現在從react-dom/server匯出，並且完全支援伺服器上的流媒體Suspense。
  • renderToPipeableStream：用於Node環境下的流媒體。
  • renderToReadableStream：用於現代邊緣執行環境，如Deno和Cloudflare工作者。

現有的renderToString方法繼續工作，但不鼓勵使用。

 

新鉤子

  • useId

useId是一個新的鉤子，用於在客戶端和伺服器上生成唯一的ID，同時避免了水化不匹配。它主要適用於與需要唯一ID的可訪問性API整合的元件庫。這解決了一個在React 17及以下版本中已經存在的問題，但在React 18中更加重要，因為新的流媒體伺服器渲染器是如何不按順序地提供HTML的。請看這裡的文件。
  • useTransition

useTransition和startTransition讓你把一些狀態更新標記為不緊急。其他狀態更新在預設情況下被認為是緊急的。React 將允許緊急狀態更新（例如，更新一個文字輸入）中斷非緊急狀態更新（例如，渲染搜尋結果列表）。請看這裡的文件
  • useDeferredValue

useDeferredValue讓你推遲重新渲染樹的非緊急部分。它類似於debouncing，但與之相比有一些優勢。沒有固定的時間延遲，所以React會在第一次渲染反映在螢幕上後立即嘗試延遲渲染。延遲渲染是可中斷的，不會阻止使用者輸入。請看這裡的文件。
  • useSyncExternalStore

useSyncExternalStore是一個新的鉤子，它允許外部儲存支援併發讀取，強制更新到儲存是同步的。在實現對外部資料來源的訂閱時，它消除了對useEffect的需求，並推薦給任何與React外部狀態整合的庫。請看這裡的文件。
  • useInsertionEffect

useInsertionEffect是一個新的鉤子，允許CSS-in-JS庫解決在渲染中注入樣式的效能問題。除非你已經建立了一個CSS-in-JS庫，否則我們不希望你使用這個。這個鉤子將在DOM被突變後執行，但在佈局效果讀取新的佈局之前。這解決了一個在React 17及以下版本中已經存在的問題，但在React 18中更加重要，因為React在併發渲染時向瀏覽器讓步，給它一個重新計算佈局的機會。請看這裡的文件。

詳細點選標題

相關文章