React面试(一)

文章目录

  • 1.vue和react有什么异同
  • 2.useEffect中为什么不能使用异步
  • 3.useEffect和useLayoutEffect的区别
  • 4.react的生命周期
  • 5.state和prop的区别
  • 6.受控组件和非受控组件
  • 7.为什么react16之后不把事件挂载到document上了
  • 8.讲一下react的hoc,它可以用来做什么?
  • 9.讲一下对react fiber的理解
  • 10.讲一下react.component和react.pureComponent的区别
  • 11.如何理解react的hooks?hooks的使用限制有哪些?
  • 12.react性能优化方式
  • 13.react中的jsx转换为真实dom的过程
  • 14.讲一下对setState理解(包括同步、异步、执行机制)

1.vue和react有什么异同

相同点:
1.VUE和react都将核心功能放在一个库中,其他的功能交给其他库,比如:状态管理库、路由库、UI库等
2.都支持组件化开发的思想
3.运用diff算法和虚拟dom提高性能

不同点
1.vue通过v-model实现双向数据绑定,而react需要手动通过state和setState实现
2.在改变数据时,vue会精确的更新依赖该数据的视图,而react会更新当前组件及其子组件
3.实现数据响应的方式不同,vue通过get和set方法,在set数据时,触发视图更新,在react中通过setState方法触发视图更新

2.useEffect中为什么不能使用异步

1.useEffect中的函数必须在组件销毁的时候调用,所以react在执行的时候必须拿到这个返回值,组件在销毁的时候才能够调用这个返回值
2.在react中,只有第一个useEffect中的函数执行完毕,才会执行第二个useEffect中的函数,如果异步执行的化,会使组件的状态变得复杂难以管理。

3.useEffect和useLayoutEffect的区别

1.两者在平常使用的时候没有区别,在获取组件布局元素的宽和高的时候,使用useLayoutEffect,其它情况使用useEffect
2.useEffect是在dom更新并且挂载到页面之后执行,而useLayoutEffect是在dom更新之后,挂在到页面之前执行的,会阻塞页面的渲染

4.react的生命周期

react生命周期包含三个阶段:挂载阶段、更新阶段、卸载阶段

5.state和prop的区别

state是组建的内部状态,组件是根据这个内部状态进行数据渲染的,而prop是,因为react有组件化的思想,当一个组件依赖其它组件的数据,可以通过prop进行数据的传递,从而进行组件的渲染。

6.受控组件和非受控组件

受控组件就是受状态控制的组件,比如input组件的value值受state影响,当state改变时,value值就会改变;非受控组件他的初始值受传入的值影响,如果要获取最新的值的话,通过ref定位到dom元素,通过dom元素获取最新的值。

7.为什么react16之后不把事件挂载到document上了

因为项目中只有一个document,将事件挂载到根节点上,不同组件有不同的根节点,这样就可以让不同版本的react应用可以共存到一起,而不用考虑兼容性问题。

8.讲一下react的hoc,它可以用来做什么?

hoc就是高阶组件,高阶函数是吧一个函数作为参数传入到另一个函数中,实现功能更强大的函数,而高阶组件是将一个组件作为参数传入到另一个函数中,相比于vue,react更容易实现高阶组件,因为每一个react组件就是一个函数。
hoc可以用来作条件渲染、权限控制

9.讲一下对react fiber的理解

fiber是为了提高渲染性能和提升用户体验而提出来的
react和vue的diff机制不同,在vue中作响应式处理data数据的时候,同时做了依赖收集,所以当数据更新的时候,会精确的更新组件,而react不同,他在setState的时候必须同时更新当前组件及其子组件,并且在react16之前没有提出fiber的时候,他们是同步渲染的,这就会导致一直占用浏览器的资源知道这个动作完成,如果项目很大往往会造成卡顿的现象。因此react16提出了fiber的概念,他将一个任务分解成很多小的任务,并且任务有优先级,可以根据优先级的高低,将正在运行的任务执行完毕就停止,执行其他的任务,当执行完优先级高的任务之后,再执行优先级低的任务,这样就可以提高渲染性能,提升用户体验。

10.讲一下react.component和react.pureComponent的区别

在react更新组件的时候,会更新当前组件及其子组件,但是大部分时候子组件是没必要更新的,因此提出了pureComponent,但是pureComponent在比较引用对象时只是浅比较,只会比较变化前后是否指向同一片区域,而不会比较该区域的值。

11.如何理解react的hooks?hooks的使用限制有哪些?

hooks可以让函数组件具备类组件的能力,比如使用state和生命周期等,常见的hooks有useState、useEffect、useRef等
使用限制:只能在函数组件中使用:因为hooks就是为了让函数组件更灵活使用而诞生的
不能在条件、循环中使用:react内部是通过链表来顺序执行hooks,如果在条件或循环中使用hooks会破坏他的有序性导致程序混乱难以管理。

12.react性能优化方式

1.避免组件无效渲染:使用PureComponent、shouldComponentUpdate、React.memo
2.在列表渲染时,添加key属性,可以提高diff的效率
3.使用懒加载
4.使用服务端渲染,减少首页加载时间,有利于SEO
5.使用一些优化的hooks,比如useMemo:可以将一个值缓存起来,只有他的依赖改变的时候重新计算,useCallBack:he useMemo类似,只是缓存的是一个函数

13.react中的jsx转换为真实dom的过程

jsx会通过babel进行转译,最终转译为react.createElementd的形式,然后react.createElementd会根据参数的不同执行不同的逻辑

14.讲一下对setState理解(包括同步、异步、执行机制)

setSate在执行的时候是同步的,但是引发react的状态更新是异步的,如果是同步的化,每调用一次setSate就会触发react状态更新,再触发组件的重新渲染,如果是异步的话,就能包多次setState的值合并到一个对象中,根据对象的值一次性触发react状态更新和组件重新渲染,这样就能提高性能,提升用户体验。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

组态软件在物联网中的应用

随着物联网的快速发展,组态软件在物联网中的应用也越来越广泛。组态软件是一种用于创建和管理物联网系统的可视化工具,它能够将传感器、设备和网络连接起来,实现数据的采集、分析和可视化。本文将探讨组态软件在物联网中的应用,并…

Java+SpringBoot+Vue+数据可视化的音乐推荐与可视化平台(程序+论文+讲解+安装+调试+售后)

感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及论文编写等相关问题都可以给我留言咨询,我会一一回复,希望帮助更多的人。 系统介绍 在互联网技术以日新月异之势迅猛发展的浪潮下,5G 通信技术的普及、云计算能力…

(论文)PartialSpoof 数据库和检测话语中嵌入的短假语音片段的对策

The PartialSpoof Database and Countermeasures for the Detection of Short Fake Speech Segments Embedded in an Utterance 摘要 自动说话人验证容易受到各种作和欺骗,例如文本到语音合成、语音转换、重放、篡改、对抗性攻击等。我们考虑一种称为“部分欺骗”…

Leaflet介绍及使用示例

一、Leaflet介绍 Leaflet是一个开源的JavaScript库,专门用于构建交互式的地图应用程序。它以其轻量级、高性能和易于使用的API而著称,方便开发者在网页中集成地图功能。Leaflet支持多种地图提供商的瓦片图层,如OpenStreetMap、Mapbox等&…

【笔记】redis回忆录(未完 重头过一遍)

了解 redis在linux上运行 没有window版本 有也是微软自己搞的 (一)安装与修改配置 1.在linux虚拟机上 安装gcc依赖 然后再usr/local/src解压在官网下载好的redis安装包 直接拖进去 tar -zxvf 安装包名字 tab键补齐 解压成功 进入软件 并执行编译命令…

使用 Apache Dubbo 释放 DeepSeek R1 的全部潜力

作者:陈子康,Apache Dubbo Contributor 2025年1月20日,国产大模型公司深度求索(DeepSeek)正式发布了大语言模型 DeepSeek-R1,并同步开源其模型权重。通过大规模强化学习技术,DeepSeek-R1 显著提…

Unity TMPro显示中文字体

TMP默认的字体只能显示英语,那么怎么显示中文呢 1、找到支持中文的字体文件 在c盘搜索Fonts文件夹有很多支持中文的字体文件 我这里选择雅黑 PS.双击打开发现里面有粗体细体普通三个版本,也可以只导入一个版本进去 2、将其拖入到unity Assets里面 3…

【MySQL篇】数据库基础

目录 1,什么是数据库? 2,主流数据库 3,MySQL介绍 1,MySQL架构 2,SQL分类 3,MySQL存储引擎 1,什么是数据库? 数据库(Database,简称DB&#xf…

Linux 日志系统·

目录 一、前言 二、实现一个简单的日志 1.可变参数 2.日志等级 3.日志时间 4.打印每一条参数 5.合并两个缓冲区 6.封装日志函数 三、完整代码 一、前言 当我们写一个函数,例如打开文件open,当我们打开失败的时候,会调用perror看到错误…

【PromptCoder】使用 package.json 生成 cursorrules

【PromptCoder】使用 package.json 生成 cursorrules 在当今快节奏的开发世界中,效率和准确性至关重要。开发者们不断寻找能够优化工作流程、帮助他们更快编写高质量代码的工具。Cursor 作为一款 AI 驱动的代码编辑器,正在彻底改变我们的编程方式。但如…

【VUE】vue-i18n: Uncaught SyntaxError: Not available in legacy mode

报错: 解决方法: 找到 createI18n 并加上 legacy: false,

2025年SCI一区智能优化算法:混沌进化优化算法(Chaotic Evolution Optimization, CEO),提供MATLAB代码

一、混沌进化优化算法 https://github.com/ITyuanshou/MATLABCode 1. 算法简介 混沌进化优化算法(Chaotic Evolution Optimization, CEO)是2025年提出的一种受混沌动力学启发的新型元启发式算法。该算法的主要灵感来源于二维离散忆阻映射的混沌进化过…

网络安全之日志审计 网络安全审计制度

一、代码审计安全 代码编写安全: 程序的两大根本:变量与函数 漏洞形成的条件:可以控制的变量“一切输入都是有害的 ” 变量到达有利用价值的函数(危险函数)“一切进入函数的变量是有害的” 漏洞的利用效果取决于最终函数的功能,变量进入…

VScode+stfp插件,实现文件远程同步保存【2025实操有效】

目录 1 痛点2 准备工作3 操作步骤3.1 第一步,下载STFP插件3.2 第二步,修改配置文件3.3 第三步,测试是否成功 4 后记 1 痛点 我一直用vscode远程连接服务器,传代码文件等到服务器上面,突然有一次服务器那边尽心维修&am…

Java高频面试之SE-23

hello啊,各位观众姥爷们!!!本baby今天又来了!哈哈哈哈哈嗝🐶 Java 中的 Stream 是 Java 8 引入的一种全新的数据处理方式,它基于函数式编程思想,提供了一种高效、简洁且灵活的方式来…

python-leetcode-乘积最大子数组

152. 乘积最大子数组 - 力扣&#xff08;LeetCode&#xff09; class Solution:def maxProduct(self, nums: List[int]) -> int:if not nums:return 0max_prod nums[0]min_prod nums[0]result nums[0]for i in range(1, len(nums)):if nums[i] < 0:max_prod, min_prod…

NavVis VLX三维扫描:高层建筑数字化的革新力量【沪敖3D】

在三维激光扫描领域&#xff0c;楼梯结构因其复杂的空间形态和连续垂直移动的实际需求&#xff0c;一直是技术难点之一。利用NavVis VLX穿戴式移动扫描系统成功完成一栋34层建筑的高效扫描&#xff0c;其中楼梯部分的数据一遍成形且无任何分层或形变。本文将深入分析该项目的技…

docker安装register私库

一、使用自己的私库 1、安装register私库 docker pull registry运行 docker run -d -v /data/registry:/var/lib/registry -p 5000:5000 --name registry registry:2参数-v /data/registry:/var/lib/registry&#xff0c;挂载目录 2、拉取需要的镜像 docker pull hello-w…

PCI_PCIe子系统学习(一)概念理清

文章目录 1、其它学习文章2、PCI和PCIe总线简单介绍2.1、PCI2.2、PCIe 3、引脚概述3.1、PCI3.1.1、PCI引脚概述3.1.2、PCI引脚定义3.1.2.1、32位 PCI (124针)3.1.2.2、64位 PCI (188针) 3.1.3、PCI引脚功能分类 3.2、PCIe3.2.1、PCIe引脚概述3.2.2、PCIe引脚定义3.2.2.1、PCIe …

解决Deepseek“服务器繁忙,请稍后再试”问题,基于硅基流动和chatbox的解决方案

文章目录 前言操作步骤步骤1&#xff1a;注册账号步骤2&#xff1a;在线体验步骤3&#xff1a;获取API密钥步骤4&#xff1a;安装chatbox步骤5&#xff1a;chatbox设置 价格方面 前言 最近在使用DeepSeek时&#xff0c;开启深度思考功能后&#xff0c;频繁遇到“服务器繁忙&am…