2024前端面试准备5-React相关

1. React 事件机制

​ React并不是直接把事件绑定到div的真实DOM上的,而是在document(>=16绑定的document,17开始绑定到root元素,方便微前端处理)处通过事件代理的方式,统一绑定了所有事件,然后根据冒泡上来的事件,将事件内容封装并交给真正的处理函数进行运行。这样的方式不仅仅减少了内存消耗,而且方便了React统一管理和事务机制。

​ 合成事件并不是原生浏览器事件而逝React自己模拟实现的合成事件。在React底层,主要对合成事件做了两件事:

  • 事件委托: react会把所有事件绑定到结构的最外层,使用统一的事件监听器,这个事件监听器上维持了一个映射来保存所有组件内部事件监听和处理函数。
  • 自动绑定:react组件中,每个方法的上下文都会自动的绑定this为当前组件。

合成事件优点:

​ 1. 兼容所有浏览器,能更好的跨平台。

​ 2. 将事件统一存放,避免了频繁的新增和删除(垃圾回收机制)。

​ 3. 方便react统一管理和事务机制。

2. React 高阶组件(HOC)、Render props、hooks 有什么区别

  • HOC:是基于React的组合特性而形成的设计模式,HOC接受一个组件作为参数,返回一个新的组件,是纯函数,没有副作用。优点:逻辑复用不影响被包裹组件的内部逻辑。缺点:props传递过程中容易重名被覆盖、容易层级嵌套过深
  • Render props:指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术。具有render prop 的组件接受一个返回React元素的函数,将render的渲染逻辑注入到组件内部。优点:数据共享,可以传递state给调用者。缺点:无法在return语句外访问数据、嵌套地狱。
  • hooks: 它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。优点:能解决上述两者的缺点 。注意点:hook只能在组件顶层使用,不可在分支语句中使用。

总结:这三个都是目前React中解决代码复用的主要方式,但是hoc和render props都有特定的使用场景和明显的缺点。hook让组件逻辑复用更简洁明了,同时也解决了hoc和render props的一些缺点。

3. 对React-Fiber的理解,它解决了什么问题?

​ react在渲染时,会递归对比VDOM,找出需要变动的节点,然后同步更新他们,这个过程期间大量的计算,react会占据浏览器资源,导致用户触发的事件得不到响应,并且导致掉帧,让用户感觉明显卡顿。Fiber架构,对这种大量的计算变成可中断的,对整体任务进行切片,分批延时对DOM进行操作,避免一次性操作大量DOM,通过某些合理的调度策略,合理的分配资源,从而提高浏览器的用户响应速度,同时兼顾任务执行效率。

4. PureComponent memo的理解

PureComponent标识一个纯组件,通常用来优化性能,减少render函数的执行次数,从而提高组件的性能。在React中当props或state发生变化时,可以通过生命周期中的shouldComponentUpdate函数执行return false来阻止组件的更新,从而减少不必要的reader执行,purecomponent会对shouldComponentUpdate做一层浅比较,浅比较会忽略属性和或状态突变情况,如果是引用数据类型的数据,只会比较不是同一个地址,而不会比较这个地址里面的数据是否一致。其实也就是数据引用指针没有变化,而数据发生改变的时候render是不会执行的。render函数不执行,省去虚拟DOM的生成和对比过程,达到提升性能的目的。

memo同PureComponent十分类似,不用的点是只能用于函数组件。

5.哪些方法会触发 React 重新渲染?重新渲染 render 会做些什么?

  1. setState()被调用会触发render,setState传入null时,不会触发render
  2. 父组件重新渲染,react中父组件重新渲染,子组件会无条件跟着重新渲染

重写渲染会对比新旧两个VNode,根据差异的类型,更新Vnode。

6.React中可以在render访问refs吗?为什么?

不可以,render 阶段 DOM 还没有生成,无法获取 DOM。DOM 的获取需要在显示和更新的生命周期中获取。

7. 对React的插槽(Portals)的理解

portals可以使得组件可以脱离父组件层级挂载在DOM树的任何位置,一般用于组件有可能被其他元素遮挡时,兼容低版本浏览器使用,例如:对话框,模态窗。

8. 对 React context 的理解

context提供了一个父组件向所有子孙组件共享数据的能力,简单说就是,当你不想在组件树中通过逐层传递props或者state的方式来传递数据时,可以使用Context来实现跨层级的组件数据传递。例如:语言、主题

9. React中什么是受控组件和非控组件?

页面中的所有输入类的DOM如果是现取现用的就是非受控组件,如果是通过setState将输入值存在state中,需要时再从state中取出,数据受state控制的组件,就是受控组件。

10.Class组件与函数组件有什么异同?

组件是 React 可复用的最小代码片段,它们会返回要在页面中渲染的 React 元素。所以无论是函数组件还是类组件,在使用方式和最终呈现效果上都是完全一致的。不同的是Class组件是基于面向对象编程的,它主打的是继承、生命周期等核心概念;而函数组件内核是函数式编程,主打的是 immutable、没有副作用、引用透明等特点。但现在由于 React Hooks 的推出,生命周期概念的淡出,函数组件可以完全取代类组件。其次继承并不是组件最佳的设计模式,官方更推崇“组合优于继承”的设计概念,所以类组件在这方面的优势也在淡出。

11.setState 调用之后发生了什么?是同步还是异步?

在代码调用setSate函数后,React会将传入的参数对象于组件当前的状态合并,然后触发调和过程,经过调和后,React会以相对高效的方式根据新的状态构建React元素树,然后会自动计算出新树与老树的节点差异,根据差异对界面进行最小化重渲染。如果在短时间频繁调用setState,react会将state的改变加入到队列中,在合适的时机,批量更新state和视图,达到提高性能的效果。

setState并不是单纯的异步/同步,会根据批处理状态选择是先存进队啦还是直接更新,在<18的React版本中,如果在React可以控制的地方,就是先存队列异步处理,比如生命周期和合成事件中;如果无法控制的地方,比如绑定的原生事件,定时器等事件中,就只能同步更新。不过在react18以后,无论是什么样的语法环境,setState都是异步更新,但是可以使用flishSync方法,使其变为同步。

12.在React中组件的this.state和setState有什么区别?

this.state通常是用来初始化state的,this.setState是用来修改state值的。如果初始化了state之后再使用this.state,之前的state会被覆盖掉,如果使用this.setState,只会替换掉相应的state值。所以,如果想要修改state的值,就需要使用setState,而不能直接修改state,直接修改state之后页面是不会更新的。

13.对 Redux 的理解,主要解决什么问题?

Redux是一个用来管理数据状态和UI状态的JavaScript应用工具。同VueX一样采用单向数据流模式,Redux 提供了一个叫 store 的统一仓储库,组件通过 dispatch 将 state 直接传入store,不用通过其他的组件。并且组件通过 subscribe 从 store获取到 state 的改变。所有的组件都可以从 store 中获取到所需的 state,当dispatch action改变state的时候,会自动更新页面。首先,用户(通过View)发出Action,发出方式就用到了dispatch方法,然后,Store自动调用Reducer,并且传入两个参数:当前State和收到的Action,Reducer会返回新的State,State—旦有变化,Store就会调用监听函数,来更新View。异步请求可以使用redux-thunk中间件来处理。

14. Redux 和 Vuex 有什么区别

vuex 弱化 dispatch,通过commit进行 store状态的一次更变;取消了action概念,不必传入特定的 action形式进行指定变更;弱化reducer,基于commit参数直接对数据进行转变,使得框架更加简易;

15. 为什么 useState 要使用数组而不是对象

useState 返回的是 array 而不是 object 的原因就是为了降低使用的复杂度,返回数组的话可以直接根据顺序解构,而返回对象的话要想使用多次就需要定义别名了。

16. React Hook 的使用限制和注意点有哪些?

  • 不要在循环、条件或嵌套函数中调用 Hook,必须始终在 React函数的顶层使用Hook;

    因为 Hooks 的设计是基于数组实现。在调用时按顺序加入数组中,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误的 Hook。

  • 使用useState时候,使用push,pop,splice等直接更改数组对象的坑,要用不可变数据。

  • useState设置状态的时候,只有第一次生效,后期需要更新状态,必须通过useEffect

  • 善用useCallback useMemo

17.对虚拟 DOM 的理解?虚拟 DOM 主要做了什么?虚拟 DOM 本身是什么?

从本质上来说,虚拟Dom是一个JS的对象,通过对象的方式来标识DOM结构。将页面的状态抽象为js的对象,配合不同的渲染工具,使跨平台渲染成为可能,通过事务处理机制,将多次DOM修改的结构一次性的更新到页面上,从而有效的减少页面的渲染次数,减少修改DOM导致的重绘重排次数,提高渲染性能。

18.虚拟 DOM 的引入与直接操作原生 DOM 相比,哪一个效率更高,为什么?

虚拟DOM得效率不一定比原生的效率高,比如说值改了一个节点的情况下,多了一层虚拟DOM得计算,怎么都不可能比得过直接操作原生DOM。虚拟 DOM 的优越之处在于,它能够在提供更爽、更高效的研发模式(也就是函数式的 UI 编程方式)的同时,仍然保持一个还不错的性能。

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

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

相关文章

Flash基础知识

1、Flash发展历程 存储器通常分为两类型&#xff0c;即随机存取的RAM&#xff08;内存&#xff09;与只读的ROM&#xff08;外存&#xff09;。 RAM&#xff0c;也称随机存取存储器&#xff0c;数据可以被读取和修改。它主要用于存储正在运行的程序和临时数据&#xff0c;是计…

redis穿透解决方案

Redis缓存穿透是指查询一个不存在于数据库中的数据&#xff08;通常是恶意用户发起的连续请求&#xff09;&#xff0c;由于缓存中没有&#xff0c;每次请求都会穿透到数据库&#xff0c;这可能会对数据库造成不必要的压力。解决缓存穿透问题的常见策略包括&#xff1a; …

CarService的构成和初始化分析

以下分析&#xff0c;基于安卓13的AAOS。 代码构成 packages/services/Car CarService相关代码&#xff0c;主要是在这个目录下 frameworks/opt/car/services 主要是carservice启动相关。 其它目录&#xff1a;audio_policy_configuration.xml和car_audio_configuration.xm…

Unity Texture2D读取像素时出错问题

Texture2D在读取像素处理时&#xff0c;经常会出错&#xff0c;这个时候可以用如下函数先转换&#xff1a; public Texture2D DeCompress(Texture2D source){RenderTexture renderTex RenderTexture.GetTemporary(source.width,source.height,0,RenderTextureFormat.Default,R…

leetcode-12-[226]翻转二叉树[101]对称二叉树[104]二叉树的最大深度[111]二叉树的最小深度

前置知识&#xff1a; 深度&#xff1a;任意节点到根节点的节点数 高度&#xff1a;任意节点到叶子节点&#xff08;左右孩子都为空&#xff09;的节点数 一、[226]翻转二叉树 重点&#xff1a;交换节点应该传入根节点 class Solution {public TreeNode invertTree(TreeNo…

JSON学习

一、JSON 1.1 简介 JSON&#xff1a;JavaScript Object Notation是一种表示对象的方式 基于JavaScript语言的轻量级的数据交换格式;&#xff08;即:用来传输数据的一种格式&#xff09; 现在传输数据的方式更多是采用json的格式&#xff0c;渐渐代替了XML 1.2 JSON的数据表示 …

人生的乐趣,在于对真知的追求

子曰&#xff1a;朝闻道&#xff0c;夕死可矣&#xff01; 孔子说&#xff1a;早上听到关于世界的真理&#xff0c;哪怕晚上就die了都可以。 这句话很有力量而经常被人引用&#xff0c;表达出我们如何看待沉重的肉身和精神世界。 我们的生活目的&#xff1a;道。 —— 要了解…

MongoDB查询

一、find 1、简单查询 #查寻所有文档 >db.foo.find()#查询包含namehgq的文档 >db.foo.find({"name":"hgq"}) #查询包含namehgq&#xff0c;age12的文档&#xff0c;默认为全部条件都匹配 >db.foo.find({"name":"hgq","…

探究 IP 地址被网站封禁的原因

在我们登录各种网站、APP浏览时&#xff0c;可能会遇到 IP 地址被某些网站封禁的情况。很多人奇怪这是为什么呢&#xff1f; 首先&#xff0c;违反网站的使用规则是比较常见的原因之一。比如&#xff0c;频繁发送垃圾邮件、恶意评论、进行网络攻击或试图破解网站的安全机制等不…

数据链路层知识分享【计算机网络】【以太网帧 | MTU的影响 | ARP技术】

博客主页&#xff1a;花果山~程序猿-CSDN博客 文章分栏&#xff1a;Linux_花果山~程序猿的博客-CSDN博客 关注我一起学习&#xff0c;一起进步&#xff0c;一起探索编程的无限可能吧&#xff01;让我们一起努力&#xff0c;一起成长&#xff01; 目录 前文 一&#xff0c; 以…

【操作系统】操作系统课后作业-聊天程序

无名管道与有名管道的区别 无名管道&#xff1a; 它是半双工的&#xff0c;具有固定的读端和写端。 只能用于具有亲缘关系的进程之间的通信&#xff08;也是父子进程或者兄弟进程之间&#xff09;。 不是普通的文件&#xff0c;不属于其他任何文件系统&#xff0c;并且只存…

Electron+Vue开源软件:洛雪音乐助手V2.8畅享海量免费歌曲

洛雪音乐助手是一款功能全面且完全免费的开源音乐软件&#xff0c;支持在Windows、Android和iOS平台上使用。 平台支持&#xff1a; 桌面版&#xff1a;采用Electron Vue技术栈开发&#xff0c;支持Windows 7及以上版本、Mac OS和Linux&#xff0c;具有广泛的用户群体覆盖。 …

深信服终端安全管理系统EDR版本升级过程

EDR当前版本为3.7.12&#xff0c;具体参考版本详情参数。需要升级到6.0.2R1版本&#xff0c;该版本更改了产品名称&#xff0c;叫做“统一端点安全管理系统aES” 当前版本详情 版本基础信息 软件版本&#xff1a;3.7.12.3829 病毒库版本&#xff1a;20240618174426 漏洞规则库&…

【安全边界】

1.安全边界是什么 安全边界是具有不同安全要求或需求的任意两个区域、子网或环境之间的交叉线。它存在于高安全性区域和低安全性区域之间&#xff0c;例如局域网&#xff08;LAN&#xff09;和互联网&#xff08;Internet&#xff09;之间。 2.为什么要建设安全边界 安全边界…

PHP入门教程5:会话管理和数据库操作

PHP入门教程5&#xff1a;会话管理和数据库操作 在前几篇文章中&#xff0c;我们学习了PHP的基础语法、控制结构、函数的使用、数组和字符串的操作&#xff0c;以及文件处理和表单处理。本文将重点介绍PHP中的会话管理和数据库操作&#xff0c;这是构建动态网站和Web应用程序的…

java.sql.Timestamp用法总结

java.sql.Timestamp用法总结 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 1. 概述 java.sql.Timestamp是Java中表示日期和时间的类&#xff0c;它继承自jav…

定制化物联网设备:开启智能生活新篇章

随着科技的进步&#xff0c;物联网&#xff08;IoT&#xff09;已成为我们日常生活和工作中不可或缺的一部分。从智能家居到工业自动化&#xff0c;物联网设备以其独特的功能和特性&#xff0c;极大地提高了我们的生活质量和工作效率。然而&#xff0c;在众多的物联网设备中&am…

Window常用的脚本有哪些?快来看看有哪些是你正在用的!(欢迎评论补充~)

前言 在日常开发中&#xff0c;如果能熟练掌握以下这些使用频率很高的脚本&#xff0c;那工作起来真的是手拿把攥&#xff0c;事半功倍&#xff0c;接下来给大家介绍一些我们日常使用率很高的一些脚本&#xff01; 常用脚本(Batchfile & VBScript) 1.一键启动.bat 一次…

负利率(Negative Interest Rates)是什么?商业银行会对普通储户实施负利率吗?

负利率是什么&#xff1f; 中文版 负利率是指中央银行或金融机构对存款人收取存款费用&#xff0c;而不是支付利息。这意味着存款人在银行存钱不仅不能赚取利息&#xff0c;反而要支付费用。以下是对负利率的详细解释&#xff1a; 负利率的理解 定义&#xff1a; 负利率意味…

ServletResponse类及其使用方法介绍

在Java Servlet技术中&#xff0c;ServletResponse是一个接口&#xff0c;它定义了服务器响应客户端请求的API。这个接口提供了设置响应头、发送错误、以及管理响应内容的方法。以下是对ServletResponse接口中一些重要方法的介绍以及它们的使用示例。 ServletResponse接口概述…