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()
对比代码如下：

//React 17import 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 18import 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的不兼容

import React from "react";import { useId } from "react-id-generator";const Component = () => {const [id] = useId();//生成唯一IDreturn <div>{id}</div>;};export default Component;

8.Concurrent Mode

Concurrent Mode为并发模式，是一个底层设计，它可以帮助应用保持响应，根据用户的设备性能和网速进行调整，通过渲染终端来修复阻塞渲染机制，在concurrent模式中，react可以同时更新多个状态。之前是同步渲染不可中断，18使同步不可中断的更新变成了异步可中断的更新

扩展：什么是批量更新？什么是hydration（水合）

批量更新？

多个状态更新操作合并为一个更新操作的机制。这种机制可以提高性能，减少不必要的重渲染，并优化渲染过程

hydration（水合）？

指在客户端将服务器端渲染的静态 HTML 内容转换为具有交互性的 React 组件树的过程