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();//生成唯一IDreturn <div>{id}</div>;
};export default Component;

8.Concurrent Mode

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

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

批量更新?

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

hydration(水合)?

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/580211.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

渗透测试(Lab4.2)

配置WebDeveloper的时候遇到一个错误 导入失败&#xff0c;因为 E:…ovf 未通过 OVF 规范一致性或虚拟硬件合规性检查。 请单击“重试”放松 OVF 规范与虚拟硬件合规性检查&#xff0c;并重新尝试导入&#xff1b; 或单击“取消”以取消导入。如果重新尝试导入&#xff0c;可能…

互联网摸鱼日报(2023-12-26)

互联网摸鱼日报(2023-12-26) 36氪新闻 折射OpenAI新一年技术路线图&#xff0c;透视Sam Altman的12个愿望清单 AIGC明星独角兽被曝卖身&#xff0c;投资者点名CEO下台&#xff0c;9个月流失15名高管 蔚来向上&#xff0c;靠80万元的ET9行不行&#xff1f; 为了让你在游戏里…

redis和数据库的同步问题

今天突然想起来这个&#xff0c;就是那么突然&#xff0c;上次项目上用过redis&#xff0c;是一个消息已读未读的问题&#xff0c;由于消息挺多的&#xff0c;如果每次都去查数据库&#xff0c;那岂不是裂开&#xff0c;所以就存缓存了。 现在想想&#xff0c;还是不大行&#…

报修系统的流程是怎么样的?有什么好用的售后工单管理系统推荐?

很多制造业公司为了做好售后报修服务&#xff0c;会特意建立一个售后报修系统。我以前有一个做家电的客户&#xff0c;他们公司就是用一个工单系统来处理消费者报修的问题&#xff0c;效果挺不错的。消费者买到的产品有问题的话&#xff0c;直接用微信扫描说明书上面的小程序码…

算法题Python常用内置函数、方法、技巧汇总(其四:数字)

文章目录 数字相关操作整除与求余取整无穷大进制转换 华为OD算法/大厂面试高频题算法练习冲刺训练 数字相关操作 整除与求余 一般而言&#xff0c;我们使用整除运算//和求余运算%来计算两个整数相除的商和余数。 div 10 // 4 mod 10 % 4如果想要同时得到商和余数&#xff…

Ubuntu22.04-安装后Terminal无法调出

参考&#xff1a; Ubuntu20.04 终端打开不了的问题排查_ubuntu终端打不开-CSDN博客 https://blog.csdn.net/u010092716/article/details/130968032 Ubuntu修改locale从而修改语言环境_ubuntu locale-CSDN博客 https://blog.csdn.net/aa1209551258/article/details/81745394 问…

mac使用idea插件 java decomplier反编译jar包

安装插件 这样在本地idea的插件目录下就有 命令 #创建文件夹&#xff0c;用以存放反编译结果jar包 mkdir test#开始反编译文件 java -cp "/Applications/IntelliJ IDEA.app/Contents/plugins/java-decompiler/lib/java-decompiler.jar" org.jetbrains.java.decompil…

【深度学习-目标检测】05 - YOLOv1 论文学习与总结

论文地址&#xff1a;You Only Look Once:Unified, Real-Time Object Detection 论文学习 1. 摘要 YOLO的提出&#xff1a;作者提出了YOLO&#xff0c;这是一种新的目标检测方法。与传统的目标检测方法不同&#xff0c;YOLO将目标检测视为一个回归问题&#xff0c;直接从图像…

Django 访问前端页面一直在转异常:ReferenceError:axios is not defined

访问&#xff1a;http://127.0.0.1:8080/ my.html 一、异常&#xff1a; 二、原因 提示&#xff1a;axios找不到&#xff01;&#xff01; 查看代码<script src"https://unpkg.com/axios/dist/axios.min.js"></script>无法访问到官网 三、解决 Using j…

HTML转Word后打开默认为WEB板式改为页面视图

在html 标签后面添加 <html xmlns:vurn:schemas-microsoft-com:vmlxmlns:ourn:schemas-microsoft-com:office:officexmlns:wurn:schemas-microsoft-com:office:wordxmlns:mhttp://schemas.microsoft.com/office/2004/12/ommlxmlnshttp://www.w3.org/TR/REC-html40> 在…

【Python百宝箱】科技之翼:自动驾驶与无人机前沿技术盘点

驾云翱翔&#xff1a;自动驾驶与无人机技术全景解读 前言 在当今科技飞速发展的时代&#xff0c;自动驾驶和无人机技术正成为引领未来交通和探索领域的关键驱动力。本文将深入探讨与这两个领域密切相关的关键技术和开源工具&#xff0c;为读者提供全面的认识和了解。 【Pyth…

模型量化之AWQ和GPTQ

什么是模型量化 模型量化&#xff08;Model Quantization&#xff09;是一种通过减少模型参数表示的位数来降低模型计算和存储开销的技术。一般来说&#xff0c;模型参数在深度学习模型中以浮点数&#xff08;例如32位浮点数&#xff09;的形式存储&#xff0c;而模型量化可以…

爬虫工作量由小到大的思维转变---<第二十四章 Scrapy的`统计数据`收集stats collection ---12月26日补>

前言: 前两篇是讲的数据诊断分析,还有一篇深挖解决内存泄漏的文章,目前我还没整理汇编出来;但是,想到分析问题的时候,忽然觉得爬虫的数据统计好像也挺重要;于是,心血来潮准备来插一篇这个------让大家对日常scrapy爬的数据,做到心里有数!不必自己去搅破脑汁捣腾日志,敲计算器了…

【R语言爬虫】使用rvest包爬取豆瓣读书Top 250,仅需50行代码(速度挺快)

【R语言爬虫】使用rvest包爬取豆瓣读书Top 250&#xff0c;仅需50行代码&#xff08;速度挺快&#xff09; 爬取目标 书名&#xff0c;作者&#xff0c;出版社&#xff0c;时间&#xff0c;价格 https://book.douban.com/top250?start0 发现需要爬取的内容就在<div cla…

Xshell连接不上本地虚拟机中的linux处理

0、连接不上虚拟机的原因 1、本地电脑未启用VMware网络。 2、连接协议选择错误。 3、防火墙屏蔽IP。 4、虚拟机网络连接模式不是桥接模式。 1、查看本地是否启用VMware的网络 2、连接协议选择 我们在新建会话时&#xff0c;可选的协议有FTP和SFTP两种&#xff0c;其中FTP采用21…

软件测试题常见版

1、python深浅拷贝 浅拷贝&#xff0c;指的是重新分配一块内存&#xff0c;创建一个新的对象&#xff0c;但里面的元素是原对象中各个子对象的引用。深拷贝&#xff0c;是指重新分配一块内存&#xff0c;创建一个新的对象&#xff0c;并且将原对象中的元素&#xff0c;以递归的…

高效资源分配:用CRM系统打造更优销售策略

CRM系统在销售团队中有着重要的应用&#xff0c;但很多销售人员可能对CRM系统存在一些负面的看法&#xff0c;认为它只是一种监管工具&#xff0c;操作空间单调枯燥。那么&#xff0c;如何让销售团队爱上CRM系统呢&#xff1f; 下面我们将分享几个方法&#xff0c;帮助销售经理…

Spring Boot国际化i18n配置指南

Spring Boot国际化i18n配置指南 一、配置 1、yml文件配置 spring:messages:basename: i18n/Messages,i18n/Messages_en_US,i18n/Messages_zh_CNencoding: UTF-8i18n&#xff1a;表示国际化文件的父目录 Messages&#xff1a;默认国际化文件 Messages_en_US&#xff1a;英文文…

关于MybatisPlus自动转化驼峰命名规则配置mapUnderscoreToCamelCase的个人测试和总结

关于MybatisPlus自动转化驼峰命名规则配置mapUnderscoreToCamelCase的个人测试和总结 测试一&#xff1a;没有添加 自动转化的配置&#xff0c;且domain中的属性名称和数据库的字段名称一致测试二&#xff1a;没有添加自动转化配置i&#xff0c;domain属性名userPassword和数据…

装饰模式(单一责任)

Decorator&#xff08;装饰模式&#xff1a;单一责任模式&#xff09; 链接&#xff1a;装饰模式实例代码 解析 目的 在某些情况下我们可能会“过度地使用继承来扩展对象的功能”&#xff0c;由于继承为类型引入的静态特质&#xff0c;使得这种扩展方式缺乏灵活性&#xff…