React面试(一)

news2025/2/28 0:48:10

文章目录

  • 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状态更新和组件重新渲染,这样就能提高性能,提升用户体验。

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

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

相关文章

AI 编码 2.0 分析、思考与探索实践:从 Cursor Composer 到 AutoDev Sketch

在周末的公司【AI4SE 效能革命与实践:软件研发的未来已来】直播里,我分享了《AI编码工具 2.0 从 Cursor 到 AutoDev Composer》主题演讲,分享了 AI 编码工具 2.0 的核心、我们的思考、以及我们的 AI 编码工具 2.0 探索实践。 在这篇文章中&am…

图扑 HT for Web 总线式拓扑图的可视化实现

在图形用户界面(GUI)设计中,自定义连线技术不仅提升了用户体验,还为复杂数据可视化开辟了新的可能性。该功能点允许用户灵活地在界面元素之间创建视觉连接,使流程图、思维导图和网络拓扑图等信息呈现更加直观和动态。 …

domain 网络安全 网络安全域

🍅 点击文末小卡片 ,免费获取网络安全全套资料,资料在手,涨薪更快 文章目录 1、域的概述 1.1、工作组与域1.2、域的特点1.3、域的组成1.4、域的部署概述1.5、活动目录1.6、组策略GPO 2、域的部署实验 2.1、建立局域网&#xf…

IDEA 2024.1 最新永久可用(亲测有效)

今年idea发布了2024.1版本,这个版本带来了一系列令人兴奋的新功能和改进。最引人注目的是集成了更先进的 AI 助手,它现在能够提供更复杂的代码辅助功能,如代码自动补全、智能代码审查等,极大地提升了开发效率。此外,用…

deepseek-r1-centos-本地服务器配置方法

参考: 纯小白 Centos 部署DeepSeek指南_centos部署deepseek-CSDN博客 https://blog.csdn.net/xingxin550/article/details/145574080 手把手教大家如何在Centos7系统中安装Deepseek,一文搞定_centos部署deepseek-CSDN博客 https://blog.csdn.net/soso67…

mapbox添加自定义图片绑定点击事件,弹窗为自定义组件

一、首先构建根据后端返回的数据构建geojson格式的数据,点位的geojson数据格式: {"type": "FeatureCollection","features": [{"type": "Feature","geometry": {"type": "…

车载DoIP诊断框架 --- 连接 DoIP ECU/车辆的故障排除

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 简单,单纯,喜欢独处,独来独往,不易合同频过着接地气的生活,除了生存温饱问题之外,没有什么过多的欲望,表面看起来很高冷,内心热情,如果你身…

嵌入式开发:傅里叶变换(4):在 STM32上面实现FFT(基于STM32L071KZT6 HAL库+DSP库)

目录 步骤 1:准备工作 步骤 2:创建 Keil 项目,并配置工程 步骤 3:在MDK工程上添加 CMSIS-DSP 库 步骤 5:编写代码 步骤 6:配置时钟和优化 步骤 7:调试与验证 步骤 8:优化和调…

vscode/cursor+godot C#中使用socketIO

在 Visual Studio Code(VS Code)中安装 NuGet 包(例如SocketIOClient),你可以通过以下几种方法: 方法 1:使用dotnet cli 打开终端:在 VS Code 中按下Ctrl 或者通过菜单View -> Terminal打开终端。 导…

应用的负载均衡

概述 负载均衡(Load Balancing) 调度后方的多台机器,以统一的接口对外提供服务,承担此职责的技术组件被称为“负载均衡”。 负载均衡器将传入的请求分发到应用服务器和数据库等计算资源。负载均衡是计算机网络中一种用于优化资源利…

区块链仿真工具SimBlock使用

1. Environment requirements SimBlock 可以在 Windows、MacOS、Ubuntu Linux 或任何支持 Java 的 Unix 平台上运行。 它需要以下版本的 JDK 和 Gradle。 请注意,SimBlock 的仓库中包含 Gradle Wrapper,因此您也可以自动安装 Gradle(我们稍…

面试八股文--数据库基础知识总结(2) MySQL

本文介绍关于MySQL的相关面试知识 一、关系型数据库 1、定义 关系型数据库(Relational Database)是一种基于关系模型的数据库管理系统(DBMS),它将数据存储在表格(表)中,并通过表格…

江协科技/江科大-51单片机入门教程——P[1-3] 单片机及开发板介绍

前言:本节主要的任务是了解一下 51 单片机和所用的普中51开发板。 目录 一、单片机介绍 二、单片机的应用领域 三、STC89C52单片机 四、命名规则 五、单片机内部拆解 六、单片机内部结构图 七、单片机管脚图 八、单片机最小系统 九、开发板介绍 十、开发…

【Uniapp-Vue3】导入uni-id用户体系

在uniapp官网的uniCloud中下载uni-id用户体系 或者直接进入加载,下载地址:uni-id-pages - DCloud 插件市场 进入以后下载插件,打开HbuilderX 选中项目,点击确定 点击跳过 点击合并 右键uniCloud文件夹下的database文件夹&#x…

如何免费使用稳定的deepseek

0、背景: 在AI辅助工作中,除了使用cursor做编程外,使用deepseek R1进行问题分析、数据分析、代码分析效果非常好。现在我经常会去拿行业信息、遇到的问题等去咨询R1,也给了自己不少启示。但是由于官网稳定性很差,很多…

基于 ‌MySQL 数据库‌对三级视图(用户视图、DBA视图、内部视图)的详细解释

基于 ‌MySQL 数据库‌对三级视图(用户视图、DBA视图、内部视图)的详细解释,结合理论与实际操作说明: 一、三级视图核心概念 数据库的三级视图是 ANSI/SPARC 体系结构的核心思想,MySQL 的实现逻辑如下: …

easyexcel和poi同时存在版本问题,使用easyexcel导出excel设置日期格式

这两天在使用easyexcel导出excel的时候日期格式全都是字符串导致导出的excel列无法筛选 后来调整了一下终于弄好了,看一下最终效果 这里涉及到easyexcel和poi版本冲突的问题,一直没搞定,最后狠下心来把所有的都升级到了最新版,然…

取topN不同算法的实现的性能差别

背景 最近在实现一个需求,需要对大量数据中排序出前N,最暴力的方法肯定是直接全量排序。这里很明显是可以不用全量排序的,取前N,我们自然而然可以想到一个算法——堆排序。 一开始自己先写好了一版,后来想起&#xff…

【实战 ES】实战 Elasticsearch:快速上手与深度实践-1.1.2典型应用场景:日志分析、实时搜索、推荐系统

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路 文章大纲 为什么选择Elasticsearch?——典型应用场景深度解析1. 引言2. 日志分析:海量数据的实时洞察2.1 行业痛点2.2 ES解决方案关键技术实现: 2.…

Spring Cloud Alibaba学习 3- Sentinel入门使用

Spring Cloud Alibaba学习 3- Sentinel入门使用 中文文档参考:Sentinel中文文档 一. SpringCloud整合Sentinel 1.1 下载Sentinel-Dashboard Sentinel下载地址:Sentinel-Dashboard 到下载目录,cmd输入 java -jar sentinel-dashboard-1.8…