一文帶你梳理React面試題（2023年版本）

---

theme: juejin

源碼分析

一、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 (

) } 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節點的引用，一般用於提前注入