React 18 中的新功能 - enlear
根據前端框架調查,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> 元件的解決方案,這些元件徹底改變了從上述步驟中產生的小型獨立單元的故障。因此,使用者可以快速檢視應用程式內容並開始與之互動。
相關文章
- Java 18 新功能介紹Java
- 【react】React 18新特性React
- WWDC 2018: ARKit 2 的新功能
- 全面瞭解 React 新功能: Suspense 和 HooksReactHook
- React18React
- Hadoop 3.0 中的新功能Hadoop
- 【譯】Flutter 2.2中的新功能Flutter
- react + electron 應用線上更新功能記錄React
- React 18 Beta來了React
- React18 之 SuspenseReact
- React 18 errors All In OneReactError
- ORACLE 12.2中的更改與新功能Oracle
- Android 9.0中的新功能 - PrecomputedTextAndroid
- 「譯」 .NET 6 中 gRPC 的新功能RPC
- Ubuntu 18.04 新功能、發行日期和更多資訊Ubuntu
- 【翻譯】Ext JS 5.0.1 中的新功能薦JS
- React.JS 18新特性ReactJS
- React 中的 onInput/onChangeReact
- react 中的blur事件React事件
- React 中的重新渲染React
- react中的DOM操作React
- React中的css失效ReactCSS
- 小推理:React18比老版React更優秀的一個地方React
- 淺談.NET 6 中 gRPC 的最新功能RPC
- React18 Automatic batchingReactBAT
- React DevUI 18.0 正式釋出?ReactdevUI
- [譯] React 中的排程React
- 淺談react 中的 this 指向React
- React中JSX的理解ReactJS
- React中的高階元件React元件
- React中的合成事件React事件
- 談談 react 中的 keyReact
- 淺談React中的diffReact
- React 中的 useRef 與 useStateReact
- React 回憶錄(四)React 中的狀態管理React
- 「React」如何在React中優雅的實現動畫React動畫
- [譯] JavaScript 2018 中即將迎來的新功能:非同步生成器及更好的正規表示式JavaScript非同步
- Vue 3.0 中令人激動的新功能:Composition APIVueAPI