React面试题总结(二)

1、说说React中setState和replaceState的区别?

1、setState用于设置状态对象
2、两个参数:nextState,将要设置的新状态,该状态会和当前的state合并;callback,可选参数,回调函数。该函数会在setState设置成功,且组件重新渲染后调用。
3、合并nextState和当前state,并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。
4、replaceState()方法与setState()类似,但是方法只会保留nextState中状态,原state不在nextState中的状态都会被删除
5、两个参数:nextState,将要设置的新状态,该状态会替换当前的state。callback,可选参数,回调函数。该函数会在replaceState设置成功,且组件重新渲染后调用。

  1. setState 是修改其中的部分状态,相当于 Object. assign,只是覆盖,不会减少原来的状态;
  2. replaceState 是完全替换原来的状态,相当于赋值,将原来的 state 替换为另一个对象,如果新状态属性减少,那么 state 中就没有这个状态了。

2、说说react中onClick绑定后的工作原理?

当组件元素绑定onClick事件之后:
1、react会对事件先进行注册,将事件统一注册到document上
2、根据组件唯一的表示key来对事件函数进行存储
3、统一的指定,dispatchEvent回调函数
4、存储事件回调:react会将click这个事件统一存放在一个对象中,回调函数中存储采用键值对的方式存储在对象中,key是组件唯一标识id,value对应的事件就是回调函数,通过组件的key就能回到相对应的函数了。

3、useEffect的依赖为引用类型如何处理?

1、使用 ‘use-deep-compare-effect’ :他可以进行深比较,使用方法也很简单, import useDeepCompareEffect from ‘use-deep-compare-effect’ 之后用useDeepCompareEffect 替换掉 原有的 useEffect 即可。
2、也可以使用 useRef这个钩子来解决上述问题,useRef的特性是跨渲染周期保存数据
3、用useRef保存了之前的数据, useEffect中的依赖以然为引用类型, 每次obj发生改变都会调用执行函数,但是执行函数中多了一个判断, prevObj是上一次渲染时obj的值, 用prevObj中的某个key与此次obj中的某个key做对比,满足条件后做其他操作

4、知道react里面的createPortal么,说说其使用场景?

1、Portal ,将子节点渲染到存在于父组件以外的 DOM 节点。
2、ReactDOM.createPortal(child, container)
第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或 fragment。第二个参数(container)是一个 DOM 元素。
2、Portals 适合脱离文档流(out of flow) 的组件,特别是 position: absolute 与 position: fixed的组件。比如模态框,通知,警告,goTop 等

5、shouldComponentUpdate有什么作用?

1、根据 shouldComponentUpdate() 的返回值,判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。
2、eact中props,state值的变化,会导致组件重新渲染。使用shouldComponentUpdate就是为了减少render不必要的渲染。 返回布尔值,然后做 Virtual DOM 比较,并得出是否需要做真实 DOM 更新

6、在使用redux过程中,如何防止定义的action-type的常量重复?

ES6引入了一种新的原始数据类型Symbol,表示独一无二的值。
Symbol函数前不能使用new命令,否则会报错。这是因为生成的Symbol是一个原始类型的值,不是对象Symbol函数可以接受一个字符串作为参数,表示对Symbol实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。

7、说说React中的虚拟dom?在虚拟dom计算的时候diff和key之间有什么关系?

1、实际上它只是一层对真实DOM的抽象,以JavaScript对象(VNode节点)作为基础的树,用对象的属性来描述节点,最终可以通过一系列操作时这棵树映射到真实环境上,创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中,所以虚拟DOM对象的节点与真实DOM的属性一一照应
2、通过JS模拟网页文档节点,生成JS对象树(虚拟DOM),然后再进行一步生成真实的DOM树,再绘制到屏幕。如果后面有内容发生改变,React会重新生成一棵全新的虚拟DOM树,再与前面的虚拟DOM树进行比对diff,把差异的部分打包成patch,再应用到真实DOM,然后渲染到屏幕浏览器。
在虚拟dom计算的时候diff和key之间有什么关系:
1、React需要同时维护两棵虚拟DOM树:一棵表示当前的DOM结构,另一棵在React状态变更将要重新渲染时生成。React通过比较这两棵树的差异,决定是否需要修改DOM结构,以及如何修改。这种算法称作Diff算法。
2、key 当同一层级的某个节点添加了对于其他同级节点唯一的key属性,当它在当前层级的位置发生了变化后。react diff算法通过新旧节点比较后,如果发现了key值相同的新旧节点,就会执行移动操作(然后依然按原策略深入节点内部的差异对比更新),而不会执行原策略的删除旧节点,创建新节点的操作。这无疑大大提高了React性能和渲染效率。

8、React的props.children使用map函数来遍历会收到异常显示,为什么?应该 如何遍历?

1、当前组件没有子节点数据类型就是undefined,
2、有一个子节点数据类型就是object 。
3、有多个子节点的时候才会是array ,只有在多个节点的时候才可以直接调用map方法,react资深提供了一个react.children.map()方法,可以安全遍历子节点对象。

9、谈谈你对immutable.js的理解?

1、Immutable.js就是react中用来做性能优化的
2、在react中使用immutable可以减少页面的一些不必要的渲染,不需要像react中进行深度对比而进行渲染
3、immutable可以直接快速的进行对比,完成渲染,提升了渲染的效率,降低了性能的消耗
4、Immutable不可改变的,在计算机中,即指一旦创建,就不能再被更改的数据
对 Immutable对象的任何修改或添加删除操作都会返回一个新的 Immutable对象
Immutable 实现的原理是 Persistent Data Structure(持久化数据结构):
1、用一种数据结构来保存数据
2、当数据被修改时,会返回一个对象,但是新的对象会尽可能的利用之前的数据结构而不会对内存造成浪费

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

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

相关文章

vscode利用lauch.json和docker中的delve调试本地crdb

---- vscode利用delve调试crdb 创建了一个delve容器用于debug crdbdelve: Delve是一个用于Go编程语言的调试器。它提供了一组命令和功能,可以帮助开发人员在调试过程中检查变量、设置断点、单步执行代码等操作。Delve可以与Go程序一起使用,…

【LLM】浅谈 StreamingLLM中的attention sink和sink token

前言 Softmax函数 SoftMax ( x ) i e x i e x 1 ∑ j 2 N e x j , x 1 ≫ x j , j ∈ 2 , … , N \text{SoftMax}(x)_i \frac{e^{x_i}}{e^{x_1} \sum_{j2}^{N} e^{x_j}}, \quad x_1 \gg x_j, j \in 2, \dots, N SoftMax(x)i​ex1​∑j2N​exj​exi​​,x1​≫xj​,j∈2,……

【爬虫实战】python微博热搜榜Top50

一.最终效果 二.项目代码 2.1 新建项目 本文使用scrapy分布式、多线程爬虫框架编写的高性能爬虫,因此新建、运行scrapy项目3步骤: 1.新建项目: scrapy startproject weibo_hot 2.新建 spider: scrapy genspider hot_search "weibo.com" 3…

揭秘元宇宙背后最炫科技风:数字经济时代,元宇宙发展解决方案及核心技术

文章目录 前言一、关于“元宇宙”业界趋势1.1、元宇宙的概念与发展历程1.2、行业应用体验向虚实融合和实时互动演进1.3、数字内容成为各行业 3D 数字世界入口 二、对于元宇宙发展的解决方案和实践2.1、MetaStudio 构建场景化全栈能力2.2、企业 3D 空间,围绕 4 类场景…

argmin是什么意思

argmin 是一个数学术语,用于表示一个函数在其定义域中取得最小值的参数值(自变量的值),而不是最小值本身。 具体来说,argmin 表示函数的自变量(通常是一个实数或向量),当输入到该函…

最新ai创作系统CHATGPT系统源码+支持GPT4.0+支持ai绘画(Midjourney)

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统AI绘画系统,支持OpenAI GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美,可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署…

【Python从入门到进阶】39、使用Selenium自动验证滑块登录

接上篇《38、selenium关于Chrome handless的基本使用》 上一篇我们介绍了selenium中有关Chrome的无头版浏览器Chrome Handless的使用。本篇我们使用selenium做一些常见的复杂验证功能,首先我们来讲解如何进行滑块自动验证的操作。 一、测试用例介绍 我们要通过sel…

MyBatis底层源码分析

🎄欢迎来到边境矢梦的csdn博文🎄 🎄本文主要梳理MyBatis底层源码分析 🎄 🌈我是边境矢梦,一个正在为秋招和算法竞赛做准备的学生🌈 🎆喜欢的朋友可以关注一下🫰&#x1f…

哪种网站适合物理服务器

哪种网站适合物理服务器 看到独立服务器这一词语,相信大家脑海立马就浮现出了它的种种优势,但是有优势就伴随着也有一定的弊端,比如说它的空间大、特殊的的组件配置,权限配置等,但是成本却非常的高,那么我…

oracle创建数据库,导入dmp操作全家桶

背景:小明在一家IT公司就职,通过查看项目,公司使用的是oracle,几天后,经理要求他从服务器导入数据库到公司服务器,聪明的小明就开始干了起来,整理如下教程。 说明:此次演示环境oracl…

C语言 —— 指针

目录 1. 指针是什么? 2. 指针和指针类型的关系 2.1 指针的解引用 2.2 指针-整数 3. 野指针 3.1 野指针成因 1. 指针未初始化 2. 指针越界访问 3. 指针指向的空间释放 3.2 如何规避野指针 4. 指针运算 4.1 指针-整数 4.2 指针-指针 指针-指针的使用 4.3 指针的关系运…

代码更换了目录,没有任何变更,但Idea编辑器却提示所有代码都变更了?

开发环境: springboot 2.4.3idea 2020 问题描述: 1、代码copy到U盘了,今天用idea打开U盘代码,却提示所有代码都被修改了 2、diff 文件看了,其实并没有任何修改,因为就算不小心误改了,也不能全…

Java进阶篇--公平锁 非公平锁

目录 ReentrantLock的介绍 重入性的实现原理 代码示例: 公平锁与非公平锁 代码示例: ReentrantLock的介绍 ReentrantLock是Java中实现Lock接口的一种重入锁(Reentrant Lock)实现类。它提供了与synchronized关键字相似的功能…

Stable Diffusion绘画,卡通,教室

1 girl, parted lips, blush, makeup, light smile, school uniform, classroom, light rays, glow, thighs, collarbone, narrow waist, (masterpiece), wallpaper 1个女孩,双唇,腮红,化妆,浅笑,校服,教室…

单链表经典OJ题

目录 ​编辑 题目: 一、移除链表元素: 本质: 解题思路: 本题分为两种解法: 我们使用解法二: 注意事项: 完整代码: 题目: 一、移除链表元素: 本质&…

C++11智能指针

目录 一、什么是智能指针?二、为什么需要智能指针?三、内存泄漏3.1 什么是内存泄漏?内存泄漏的危害是什么?3.2 内存泄漏的分类3.3 如何检测内存泄漏?3.4 如何避免内存泄漏? 四、智能指针的使用及原理4.1 RA…

Kotlin vs Java:为什么Springboot官方教程选择了Kotlin?

导语 作为Java开发者的你,是否在为寻找Java的替代品而烦恼?担心受知识产权问题困扰?别担心,Kotlin来了!它是你的救星,也是Springboot官网教程的选择。想知道为什么吗?那就往下翻吧!…

【算法与数据结构】--常见数据结构--栈和队列

一、栈 栈(Stack) 是一种基本的数据结构,具有后进先出(LIFO)的特性,类似于现实生活中的一叠盘子。栈用于存储一组元素,但只允许在栈顶进行插入(入栈)和删除(…

NeurIPS 2023 | MQ-Det: 首个支持多模态查询的开放世界目标检测大模型

目前的开放世界目标检测模型大多遵循文本查询的模式,即利用类别文本描述在目标图像中查询潜在目标。然而,这种方式往往会面临“广而不精”的问题。一图胜千言,为此,作者提出了基于多模态查询的目标检测(MQ-Det&#xf…

傅里叶变换和其图像处理中的应用

以下部分文字资料整合于网络,本文仅供自己学习用! 一、为什么要在频域进行图像处理? 一些在空间域表述困难的增强任务,在频率域中变得非常普通 滤波在频率域更为直观,你想想嘛,所谓滤波,就是…