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

发布时间:2023年12月26日

回答思路: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 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的不兼容

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

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

export default Component;

8.Concurrent Mode

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

扩展:什么是批量更新?什么是hydration(水合)

批量更新?

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

hydration(水合)?

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

文章来源:https://blog.csdn.net/laowang357/article/details/135229077
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。