面试之《react近几个版本的更新要点》

news/2025/2/26 8:55:46

React 16.x 系列

React 16.0

Fiber 架构:引入了全新的 Fiber 协调器,解决了旧版同步渲染长时间阻塞主线程的问题,实现了异步可中断渲染、优先级调度、时间分片等特性,大大提升了大型应用的性能和响应能力。
新的错误边界(Error Boundaries):引入错误边界组件,它是一种 React 组件,能够捕获并处理其子组件树中发生的 JavaScript 错误,记录错误日志,并展示一个备用 UI,而不是让整个应用崩溃。
新的生命周期方法:引入 getDerivedStateFromProps 和 getSnapshotBeforeUpdate 生命周期方法,以适应 Fiber 架构的异步渲染特性。

React 16.3

新的上下文 API(Context API):提供了更简洁、易用的上下文 API,用于在组件树中跨层级传递数据,避免了通过 props 层层传递的繁琐,如 React.createContext、Provider 和 Consumer。
新的生命周期方法:引入 getDerivedStateFromProps 和 getSnapshotBeforeUpdate 来替代 componentWillReceiveProps、componentWillMount 和 componentWillUpdate 等不安全的生命周期方法,这些新方法能更好地适应异步渲染。

React 16.8

Hooks:引入了 Hooks,这是 React 自发布以来最大的一次更新。Hooks 允许你在不编写 class 的情况下使用 state 以及其他的 React 特性,例如 useState 用于管理组件状态,useEffect 用于处理副作用(如数据获取、订阅等),还有 useContext、useReducer 等一系列内置 Hooks。

React 17.x 系列

React 17.0

事件委托机制改变:React 17 不再将事件委托到 document 上,而是委托到渲染 React 树的根 DOM 节点上,这使得在一个页面中同时使用多个 React 版本或者 React 与其他库混合使用时更加方便。

移除 unstable_ 前缀: 之前带有 unstable_ 前缀的 API 被移除或者转正,API 更加稳定。

无重大新特性:此版本主要是为后续的更新做铺垫,重点在于兼容性和稳定性的提升,使得 React 升级更加平滑。

React 18.x 系列

React 18.0

自动批处理(Automatic Batching):在 React 18 中,所有的更新都会自动进行批处理,包括 Promise、setTimeout、原生事件处理函数等场景下的更新,这意味着多个状态更新会合并为一次渲染,减少不必要的渲染,提升性能。
新的渲染 API:引入了 createRoot 替代 ReactDOM.render,使用 createRoot 来创建根节点,开启并发模式的渲染。
并发特性:并发模式是 React 18 的核心特性之一,它允许 React 同时准备多个版本的 UI,根据用户设备性能和网络状况,以更智能的方式渲染,实现渐进式渲染、时间切片等功能,提升用户体验。
新的 Hooks:如 useId 用于生成全局唯一的 ID,useSyncExternalStore 用于订阅外部数据源,useInsertionEffect 用于在 DOM 插入之前执行副作用。


http://www.niftyadmin.cn/n/5868431.html

相关文章

【愚公系列】《Python网络爬虫从入门到精通》033-DataFrame的数据排序

标题详情作者简介愚公搬代码头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。近期荣誉2022年度…

[Web 安全] PHP 反序列化漏洞 —— PHP 序列化 反序列化

关注这个专栏的其他相关笔记:[Web 安全] 反序列化漏洞 - 学习笔记-CSDN博客 0x01:PHP 序列化 — Serialize 序列化就是将对象的状态信息转化为可以存储或传输的形式的过程,在 PHP 中,通常使用 serialize() 函数来完成序列化的操作…

React七Formik

Formik是一个专为React构建的开源表单库。它提供了一个易于使用的API来处理表单状态管理,表单验证以及表单提交。Formik支持React中的所有表单元素和事件,可以很好地与React生态系统中的其他库集成。同时,Formik还提供了一些高级功能&#xf…

github 推送的常见问题以及解决

文章目录 git add 的时候问题1为什么会发生这种情况?Git 的警告含义如何解决?1. **保持 Git 的默认行为(推荐)**2. **禁用自动转换**3. **仅在工作目录中禁用转换**4. **统一使用 LF(跨平台开发推荐)** git…

2.25力扣每日一题--设计内存分配器

2502. 设计内存分配器 - 力扣(LeetCode) 一:JAVA Allocator(int n)函数:类构造器 int allocate(int size, int mID)函数:输入,待插入块的大小size,插入内容mid / 输出,插入位置块的起始位置…

【redis】数据类型之Bitfields

Redis的Bitfields(位域)与Bitmaps一样,在Redis中并不是一种独立的数据类型,而是一种基于字符串的数据结构,用于处理位级别的操作。允许用户将一个Redis字符串视作由一系列二进制位组成的数组,并对这些位进行…

Linux 基本开发工具的使用(yum、vim、gcc、g++、gdb、make/makefile)

文章目录 Linux 软件包管理器 - yum理解什么是软件包和yum如何查看/查找软件包如何安装软件如何实现本地机器和云服务器之间的文件互传如何卸载软件 Linux 编辑器 - vim 的使用vim 的基本概念vim 的基本操作vim 命令模式各命令汇总vim 底行模式各命令汇总vim 的简单配置 Linux …

关于<<DeepSeek-R1:通过强化学习激励大语言模型的推理能力>>的解读

今日关于<<DeepSeek-R1:通过强化学习激励大语言模型的推理能力>>这篇文章很火, DeepSeek-R1:通过强化学习激励大语言模型的推理能力-CSDN博客 因为是专业文章很多小伙伴看不懂,那么今天我整理了一个解读文章,希望对你有所帮助: 这篇论文主要介绍了一种通过…