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

//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 组件树的过程

你可能感兴趣的:(react.js,前端,javascript,前端面试)