React 18 中的新功能 - enlear

banq發表於2021-11-11

根據前端框架調查,Reactjs 是開發者社群中最受歡迎和喜愛的框架。此外,根據2020 年堆疊溢位調查,React 是開發人員之間使用最多的前端開發框架。只有 jQuery 庫領先於 Reactjs。

現在,是時候通過更詳細的描述來檢視 React 18 的主要功能了。在此之前,我們看到了最新更新的主要要點。

React 18 的主要產品

  • 效能改進
  • 更新了併發功能
  • 伺服器端渲染的重要改進

 

併發

併發將同時執行多個任務。在標準的 React 應用程式中,如果動畫在一個元件中工作,同時使用者點選或輸入其他 React 元件,如果使用者鍵入或單擊按鈕,動畫也會在 React 的上下文中呈現。

此外,React 可以處理所有鉤子呼叫、函式呼叫和事件回撥。其中一些也同時發生。在React 18之前,使用者無法控制函式的呼叫順序。但是,在 React 18 到來之後,它通過轉換 API 向使用者提供了對事件迴圈的控制。

 

批更新處理 

自動更新批處理意味著在單個渲染中反應多個狀態更新以提高效能的組稱為批處理。React 提供了最佳效能,因為它避免了不重要的重新渲染。它還阻止元件呈現半完成狀態,同時在建立錯誤時更新單個狀態變數。例如,在餐廳,服務員在選擇第一道菜後不會跑到他的廚房,而是等待完成訂單。

React 18在更新後啟動的自動批處理中,它會重新渲染一次,而不管其狀態來源。

 

伺服器段渲染SSR

伺服器端渲染邏輯是擴充套件。在 React 的 SSR 應用中,有一些步驟是連續發生的。

  • 伺服器會檢索那些顯示在 UI 上的相關資料。
  • 伺服器將整個應用程式呈現為 HTML 並迅速響應客戶端響應。
  • 客戶端會執行不包括 HTML 的 javascript 包。

在最後一步,客戶端與 javascript 邏輯連線,因為它被稱為 hydration。

典型的 SSR 應用程式存在一個問題,即每個步驟都必須完成才能進入下一步。

React 18 提供了帶有 <suspense> 元件的解決方案,這些元件徹底改變了從上述步驟中產生的小型獨立單元的故障。因此,使用者可以快速檢視應用程式內容並開始與之互動。

 

相關文章