一文帶你梳理React面試題(2023年版本)

語言: CN / TW / HK

theme: juejin

原始碼分析

image.png

一、React18有哪些更新?

https://juejin.cn/post/7094037148088664078#heading-12

  1. setState自動批處理

在react17中,只有react事件會進行批處理,原生js事件、promise,setTimeout、setInterval不會

react18,將所有事件都進行批處理,即多次setState會被合併為1次執行,提高了效能,在資料層,將多個狀態更新合併成一次處理(在檢視層,將多次渲染合併成一次渲染)

  1. 引入了新的root API,支援new concurrent renderer(併發模式的渲染)

``` //React 17 import React from "react" import ReactDOM from "react-dom" import App from "./App"

const root = document.getElementById("root") ReactDOM.render(root,)

// 解除安裝元件 ReactDOM.unmountComponentAtNode(root)

// React 18 import React from "react" import ReactDOM from "react-dom/client" import App from "./App" const root = document.getElementById("root") ReactDOM.createRoot(root).render()

// 解除安裝元件 root.unmount()
```

  1. 去掉了對IE瀏覽器的支援,react18引入的新特性全部基於現代瀏覽器,如需支援需要退回到react17版本
  2. flushSync

批量更新是一個破壞性的更新,如果想退出批量更新,可以使用flushSync

```jsx import React,{useState} from "react" import {flushSync} from "react-dom"

const App=()=>{ const [count,setCount]=useState(0) const [count2,setCount2]=useState(0)

return (

count:{count} count2:{count2}

) } export default App

```

  1. react元件返回值更新

  2. 在react17中,返回空元件只能返回null,顯式返回undefined會報錯

  3. 在react18中,支援null和undefined返回

  4. strict mode更新

當你使用嚴格模式時,React會對每個元件返回兩次渲染,以便你觀察一些意想不到的結果,在react17中去掉了一次渲染的控制檯日誌,以便讓日誌容易閱讀。react18取消了這個限制,第二次渲染會以淺灰色出現在控制檯日誌

  1. Suspense不再需要fallback捕獲
  2. 支援useId

在伺服器和客戶端生成相同的唯一一個id,避免hydrating的不相容

  1. useSyncExternalStore

用於解決外部資料撕裂問題

  1. useInsertionEffect

這個hooks只建議在css in js庫中使用,這個hooks執行時機在DOM生成之後,useLayoutEffect執行之前,它的工作原理大致與useLayoutEffect相同,此時無法訪問DOM節點的引用,一般用於提前注入