前端面试题大合集4----框架篇(React)

一、React 合成事件

Dom事件流分三个阶段:事件捕获阶段,目标阶段,事件冒泡阶段

React在事件绑定时有一套自身的机制,就是合成事件。如下比较直观:

react中事件绑定:
<div className="dome" onClick={this.handleClick}>
普通的事件绑定:
<div class="dome" onclick="handleClick()">

React合成事件机制:React并不是将click事件直接绑定在dom上面,而是采用事件冒泡的形式冒泡到document上面,然后React将事件封装给正式的函数运行和处理。

React合成事件原理:

  1. 当用户在为onClick添加函数时,React并没有将Click绑定到Dom上;
  2. 而是document处监听所有支持的事件,当事件发生并冒泡至document处时,React将事件内容封装交给中间层SyntheticEvent (负责所有事件合成);
  3. 然后使用统一的分发函数dispatchEvent,将封装的事件内容交由真正的处理函数执行。

React中也可以使用原生事件,合成事件和原生事件也可以混合使用:

class Demo extends React.Component {componentDidMount() {const $this = ReactDOM.findDOMNode(this)$this.addEventListener('click', this.onDOMClick, false)}onDOMClick = evt => {console.log('dom event')}onClick = evt => {console.log('react event')}render() {return (<div onClick={this.onClick}>Demo</div>)}
}

React中阻止事件冒泡调用:evt.stopPropagation()方法,由于Dom事件被阻止了,无法到达document,所以合成事件自然不会被触发。


二、React中的setState,什么时候时同步的,什么时候时异步的?

1. react18版本之前

  • setState在不同情况下可以表现为异步或同步
  1. 在Promise的状态更新、js原生事件、setTimeout、setInterval中是同步的。
  2. 在react的合成事件中,是异步的

2. react18版本之后。

  • setState都会表现为异步(即批处理)。
  1. 批处理:是指 React将多个状态更新分组到单个重新渲染中以获得更好的性能
  2. 如果同一点击事件中有两个状态更新,React 总是将它们批处理为一次重新渲染。如果运行以下代码,您将看到每次单击时,尽管您设置了两次状态,React 只执行一次渲染
function App() {const [count, setCount] = useState(0);const [flag, setFlag] = useState(false);function handleClick() {setCount(c => c + 1); // Does not re-render yetsetFlag(f => !f); // Does not re-render yet// React will only re-render once at the end (that's batching!)}return (<div><button onClick={handleClick}>Next</button><h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1></div>);
}
  • 总结

setState 只在合成事件和 hook() 中是“异步”的,在 原生事件和 setTimeout 中都是同步的。

三、React Hook相关知识
1、请勿在循环或者条件语句中使用hook

因为React Hook是以单向循环链表的形式存储的,即是有序的。

循环是为了从最后一个节点移动到下一个节点的时候,只需要通过next一步就可以拿到第一个节点。

React Hook的执行,分为mountupdate阶段。在mount阶段,通过mountWorkInProgressHook()创建各个hooks(如useState、 useMemo、useEffect、useCallBack等)并且将当前hook添加到表尾。在update阶段,在获取或者更新hooks只的时候,会先获取当前hook的状态:hook.memoizedState,并且按照顺序读取或更新hook,若在条件判断或者循环中使用hooks,那么在更新阶段若增加或者减少了某个hook,hooks的数量发生变化,而React是按照顺序,通过next读取下一个hook,则导致后面的hooks和挂载阶段对应不上,发生读写错误的情况,从而引发bug。

React为什么要以单向循环链表的形式存储hooks呢?直接以key-value的对象形式存储就可以在循环或条件语句中使用hooks了,岂不更好?

这是因为react scheduler的调度策略如此,以链表的形式存储是为了可以实现并发、可打断、可恢复、可继续执行下一个fiber任务。

2、使用map循环数组渲染列表时须指定唯一且稳定的key

react中的key本质时服务于diff算法的,它的默认值是null,在diff算法中,新旧节点是否可以复用,首先就会判断key是否相同,其后才会进行其他条件的判定(如props),从而提升渲染性能,减少重复无效的渲染。

为什么在渲染列表的时候,不能讲index设置为key?

因为显式的把index设置为key,和不设置效果是一样的,这就是所谓的就地复用原则,即react在diff的时候,如果没有key,就会在老虚拟Dom树中,找到对应顺序位置的组件,然后对比组件的类型和props来决定是否需要重新渲染。

index作为key,不仅会在数组发生变化的时候,造成无效多余的渲染,还可能在组件含有非受控组件的时候,造成UI渲染错误。

如果渲染列表的时候,key重复了会怎么样?

首先react会给你输出警告,告诉你key值应该是唯一的,以便组件在更新期间保持其标识。重复的key可能导致子节点被重复使用或省略,从而引发UI bug。

3、memo

在react中,当我们setState之后,若值发生变化,则会重新render当前组件以及其子组件,在必要的时候,我们可以使用memo进行优化,来减少无效渲染。memo是一个高阶组件,接受一个组件为参数,并返回一个原组件为基础的新组件,而在memo内部,则会使用Object.is来遍历对比新旧props是否发生变化,以决定是否需要重新render。

4、useMemo和useCallback

它两个都是用来缓存数据,优化性能的。

  • 共同作用

在依赖数据发生变化的时候,才会调用传进去的回调函数去重新计算结果,起到一个缓存的作用

  • 两者的区别

useMemo  缓存的结果是回调函数中return回来的值,主要用于缓存计算结果的值,应用场景如需要计算的状态。
useCallback  缓存的结果是函数,主要用于缓存函数,应用场景如需要缓存的函数,因为函数式组件每次任何一个state发生变化,会触发整个组件更新,一些函数是没有必要更新的,此时就应该缓存起来,提高性能,减少对资源的浪费;另外还需要注意的是,useCallback应该和React.memo配套使用,缺了一个都可能导致性能不升反而下降。

5、useImperativeHandle (forwardRef)

某个组件想要暴漏一些方法,来供外部组件来调用。就需要用这个hook,需要和forwardRef来配合使用。

6、获取最新的state

在react中,setState之后,是采用异步调度、批量更新的策略,导致我们无法直接获取最新的state。

在使用class组件的时候,我们可以通过传递第二个参数,传一个回调函数来获取最新的state,但是在React18版本之后,就算在class component里面,setTimeout,原生事件回调里,也是异步批量更新了。

在hooks里面,我们目前只能通过useEffect,把当前state当作依赖传入,来在useEffect回调函数里面获取最新的state。

7、useRef

如果我们想在hooks里面获取同步最新的值,可以使用useRef;创建一个ref对象,然后挂载到hook.memoizedState,我们在修改的时候,就是直接修改ref.current。useRef其实就是提供一个稳定的变量,在组件的整个生命周期都是持续存在且是同一个引用。

注意:修改useRef返回的状态不会引起UI的重渲染。

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

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

相关文章

如何解决3D模型变黑或贴图不显示的问题---模大狮模型网

在进行3D建模和视觉渲染时&#xff0c;经常会遇到模型表面变黑或贴图不显示的问题&#xff0c;这可能严重影响最终视觉效果的质量。这些问题通常与材质设置、光照配置或文件路径错误有关。本文将探讨几种常见原因及其解决方法&#xff0c;帮助3D艺术家和开发者更有效地处理这些…

Java | Leetcode Java题解之第88题合并两个有序数组

题目&#xff1a; 题解&#xff1a; class Solution {public void merge(int[] nums1, int m, int[] nums2, int n) {int p1 m - 1, p2 n - 1;int tail m n - 1;int cur;while (p1 > 0 || p2 > 0) {if (p1 -1) {cur nums2[p2--];} else if (p2 -1) {cur nums1[p…

Hive表数据优化

Hive表数据优化 1.文件格式 为Hive表中的数据选择一个合适的文件格式&#xff0c;对提高查询性能的提高是十分有益的。 &#xff08;1&#xff09;Text File 文本文件是Hive默认使用的文件格式&#xff0c;文本文件中的一行内容&#xff0c;就对应Hive表中的一行记录。 可…

VTK图形算法API:vtkSphereSource,球几何数据

大家好&#xff0c;我是先锋&#xff0c;专注于AI领域和编程技术分享&#xff0c;在这里定期分享计算机编程知识&#xff0c;AI应用知识&#xff0c;职场经验&#xff1b; 本系列介绍VTK图像算法API&#xff0c;后续会介绍VTK项目实践应用&#xff0c;关注我&#xff0c;不错过…

Linux中system V 标准 与 Psix标准

一. 简介 本文简单了解一下&#xff0c; Linux下 的两种标准&#xff1a; system V标准与 Psix标准。 二. Linux中system V 标准 与 Psix标准 1. Linux中system V 标准 与 Psix标准 System V 和 POSIX 是指定操作系统如何实现标准化API的两大标准。 System V 是一套标准&…

GPS与精致农业 无人机应用 农业遥感 农业类

全球定位系统是美国国防部主要为满足军事部门对海上、陆地和空中设施进行高精度导航和定位的要求而建立的。GPS系统最基本的特点是以“多星、高轨、高频、测量-测距”为体制&#xff0c;以高精度的原子钟为核心。GPS作为新一代卫星导航与定位系统&#xff0c;不仅具有全球性、全…

MySQL获取某一天(例如 ‘2023-10-23‘)的非重复 shopid 值

如果你只想获取某一天&#xff08;例如 2023-10-23&#xff09;的非重复 shopid 值&#xff0c;而不计算它们的数量&#xff0c;你可以使用 DISTINCT 关键字结合 WHERE 子句来查询。以下是相应的 SQL 查询&#xff1a; SELECT DISTINCT shopid FROM your_table_name WHERE…

13.复习1笔记

文章目录 1. 习题12. 习题22.1 小题12.2 小题2 3. 习题33.1 小题3.2 小题 1. 习题1 假设我们有三个向量 U , V , W U,V,W U,V,W是 R 7 R^7 R7空间内的非零向量。由U,V,W三个向量生成的属于 R 7 R^7 R7的子空间维度多少&#xff1f; 因为U,V,W是非零向量&#xff0c;所以子空间…

代码随想录算法训练营Day38 | 509. 斐波那契数 70. 爬楼梯 746. 使用最小花费爬楼梯

代码随想录算法训练营Day38 | 509. 斐波那契数 70. 爬楼梯 746. 使用最小花费爬楼梯 LeetCode 509. 斐波那契数 题目链接&#xff1a;LeetCode 509. 斐波那契数 思路&#xff1a; 维护两个数组即可。确定dp0和dp1以及状态转移条件。 class Solution { public:int fib(int n…

LeetCode 力扣题目:买卖股票的最佳时机 III

❤️❤️❤️ 欢迎来到我的博客。希望您能在这里找到既有价值又有趣的内容&#xff0c;和我一起探索、学习和成长。欢迎评论区畅所欲言、享受知识的乐趣&#xff01; 推荐&#xff1a;数据分析螺丝钉的首页 格物致知 终身学习 期待您的关注 导航&#xff1a; LeetCode解锁100…

统计学方法的比较与评估

分析不同统计学方法的优缺点以及它们在特定情境下的适用性是一个复杂而有趣的课题。下面我将简要讨论一些常见的统计学方法&#xff0c;并比较它们的特点&#xff1a; 1. **参数统计与非参数统计&#xff1a;** - 参数统计&#xff1a;假设总体分布的形态&#xff0c;并基于…

Django5.0入门基本使用

文章目录 一、安装1、安装django环境2、创建项目3、启动服务器4、创建第一个应用&#xff08;1&#xff09;创建应用&#xff08;2&#xff09;编写视图&#xff08;3&#xff09;映射url&#xff08;4&#xff09;测试 二、核心概念1、django.urls 函数&#xff08;1&#xff…

U盘打不开提示格式化怎么办?(含数据恢复及U盘修复教程)

引言&#xff1a; 随着数字化时代的发展&#xff0c;U盘已成为我们日常生活和工作中不可或缺的数据存储工具。然而&#xff0c;有时我们可能会遇到U盘突然无法打开&#xff0c;并提示需要格式化的问题。这不仅会打乱我们的工作节奏&#xff0c;还可能会导致重要数据丢失。本文…

关于SQL

数据库简介&#xff1a; 数据库分类 关系型数据库模型&#xff1a; 优点&#xff1a;易于维护&#xff0c;可以实现复杂的查询 缺点&#xff1a;海量数据 读取写入性能差&#xff0c;高并发下数据库的io是瓶颈 是把复杂的数据结构归结为简单的二元关系&#xff08;即二维表…

Milvus 美基本概念

Milvus是一种基于向量相似度搜索的开源向量数据库&#xff0c;被广泛应用于诸如图像检索、推荐系统、自然语言处理等领域。本文将从Milvus的基本概念出发&#xff0c;详细介绍其在向量相似度搜索方面的特点和应用。 一、Milvus的基本概念 向量&#xff1a;在Milvus中&#xf…

机器学习中的聚类

目录 认识聚类算法 聚类算法API的使用 聚类算法实现流程 聚类算法模型评估 认识聚类算法 聚类算法是一种无监督的机器学习算法。 它将一组数据分成若干个不同的群组&#xff0c;使得每个群组内部的数据点相似度高&#xff0c;而不同群组之间的数据点相似度低。常用的相似…

采用java+B/S开发的全套医院绩效考核系统源码springboot+mybaits 医院绩效考核系统优势

采用java开发的全套医院绩效考核系统源码springbootmybaits 医院绩效考核系统优势 医院绩效管理系统解决方案紧扣新医改形势下医院绩效管理的要求&#xff0c;以“工作量为基础的考核方案”为核心思想&#xff0c;结合患者满意度、服务质量、技术难度、工作效率、医德医风等管…

Adobe Media Encoder ME v24.3.0 解锁版 (视频和音频编码渲染工具)

Adobe系列软件安装目录 一、Adobe Photoshop PS 25.6.0 解锁版 (最流行的图像设计软件) 二、Adobe Media Encoder ME v24.3.0 解锁版 (视频和音频编码渲染工具) 三、Adobe Premiere Pro v24.3.0 解锁版 (领先的视频编辑软件) 四、Adobe After Effects AE v24.3.0 解锁版 (视…

【2024年5月备考新增】】 考前篇(4)《官方平台 - 考生模拟练习平台常用操作(三)》

9 如何绘制七格图 第一步:选择图形元件“网络计划”中的七格图元件,在绘图区点击 第二步:批量复制(先选中元件,按Ctrl+C, 再 Ctrl+V) 七格形状,有多少活动复制多少个 选中多个图形后,可点左上角的对齐工具进行对齐; 第三步:逐个标注每个活动的参数,使用箭线连接每个…

从XML配置角度理解Spring AOP

1. Spring AOP与动态代理 1.1 Spring AOP和动态代理的关系 Spring AOP使用动态代理作为其主要机制来实现面向切面的编程。这种机制允许Spring在运行时动态地创建代理对象&#xff0c;这些代理对象包装了目标对象&#xff08;即业务组件&#xff09;&#xff0c;以便在调用目标对…