2024最新前端React面试题：React18相比react17有哪些主要更新？

React18相比react17有哪些主要更新？

回答思路：1.setState和自动批处理-->2.新增root API--> 3.并发模式渲染-->4.不对IE浏览器支持-->5.react组件返回值更新-->6.strict mode更新-->7.react18支持useId-->8.-->Concurrent Mode-->扩展：什么是批量更新？什么是hydration（水合）
- 1.setState和自动批处理
- 2.新增rootAPI
- 3.并发模式渲染
- 4.不对IE浏览器支持
- 5.react组件返回值更新
- 6.strict mode更新
- 7.react18支持useId
- 8.Concurrent Mode
- 扩展：什么是批量更新？什么是hydration（水合）
- - 批量更新？
  - hydration（水合）？

回答思路：1.setState和自动批处理–>2.新增root API–> 3.并发模式渲染–>4.不对IE浏览器支持–>5.react组件返回值更新–>6.strict mode更新–>7.react18支持useId–>8.–>Concurrent Mode–>扩展：什么是批量更新？什么是hydration（水合）

1.setState和自动批处理

在react17中只有react事件会进行批处理，原生js事件、promise、setTimeout、setInterval不会自动批处理，在react18中所有事件都进行批处理，多次setState会被合并为一次执行，提高了性能

2.新增rootAPI

新的root API，支持new concurrent renderer(并发模式的渲染)
在react18中这样创建根节点：
ReactDOM.createRoot(root).render()
对比代码如下：

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

const root = document.getElementById("root")
ReactDOM.render(<App/>,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(<App/>)

// 卸载组件
ReactDOM.unmountComponentAtNode(root)

3.并发模式渲染

React 18引入了新的并发渲染器，允许React在多个优先级级别上进行渲染，并根据浏览器的空闲时间来分配渲染任务，提高应用程序的响应能力和用户体验。

4.不对IE浏览器支持

不对IE浏览器支持，react18引入的新特性全部基于现代浏览器，如需支持需要退回到react17版本

5.react组件返回值更新

在17中，返回空组件只能返回null，显式返回undefined会报错
在18中，返回空组件可以返回null和undefined

6.strict mode更新

严格模式下，react会对每个组件返回两次渲染，以便于查看到一些可能发生的问题，在17中去掉了一次渲染的控制台日志，在18中又取消了这个限制，所以在18中还有有两次日志打印，第二次打印为浅灰色

7.react18支持useId

服务器和客户端生成相同的唯一一个id，避免hydrating的不兼容

javascript">import React from "react";
import { useId } from "react-id-generator";

const Component = () => {
  const [id] = useId();
  //生成唯一ID
  return <div>{id}</div>;
};

export default Component;