当前位置: 首页 > news >正文

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

相关文章:

React面试(一)

文章目录 1.vue和react有什么异同2.useEffect中为什么不能使用异步3.useEffect和useLayoutEffect的区别4.react的生命周期5.state和prop的区别6.受控组件和非受控组件7.为什么react16之后不把事件挂载到document上了8.讲一下react的hoc,它可以用来做什么&#xff1f…...

《解锁AI密码,机器人精准感知环境不再是梦!》

在科技飞速发展的当下,人工智能与机器人技术的融合正深刻改变着世界。其中,人工智能助力机器人实现更精准的环境感知,已成为该领域的核心课题,吸引着全球科研人员与科技企业的目光。这不仅关乎机器人能否在复杂环境中高效执行任务…...

C/C++语言知识点二

1. 编程算法之“哨兵”思想 哨兵思想是一种编程技巧,通过在数据结构的边界或特定位置放置一个特殊值(称为“哨兵”),来简化逻辑判断和提高代码效率。哨兵通常是一个标记值,用于指示某种条件或边界,从而避免…...

【SpringBoot】——分组校验、自定义注解、登入验证(集成redis)、属性配置方式、多环境开发系统学习知识

🎼个人主页:【Y小夜】 😎作者简介:一位双非学校的大三学生,编程爱好者, 专注于基础和实战分享,欢迎私信咨询! 🎆入门专栏:🎇【MySQL&#xff0…...

【EB-03】 AUTOSAR builder与EB RTE集成

AUTOSAR builder与EB RTE集成 1. Import Arxml files to Tresos2. Run MultiTask Script3. Add Components3.1 Run EcuExtractCreator Script4. Mapping Component to Partitions5. Event Mapping/Runnables Mapping to Tasks6. Port Connect7. Run SvcAs_Trigger Script8. Ver…...

布署elfk-准备工作

建议申请5台机器部署elfk: filebeat(每台app)--> logstash(2台keepalived)--> elasticsearch(3台)--> kibana(部署es上)采集输出 处理转发 分布式存储 展示 ELK中文社区: 搜索客,搜索人自己的社区 官方…...

JVM垃圾回收器深度底层原理分析与知识体系构建

一、垃圾回收的基本步骤 标记(Marking) 从GC Roots(如虚拟机栈、方法区静态变量、本地方法栈等)出发,遍历对象引用链,标记所有可达对象为存活对象,未被标记的则视为垃圾。此阶段需暂停用户线程&…...

Flutter系列教程之(5)——常用控件Widget的使用示例

目录 1.页面跳转 2.某个控件设置点击事件 3.AlertDialog对话框的使用 4.文本输入框 5.按钮 圆角扁平按钮: 圆角悬浮按钮: 6.补充 圆点 7.布局使用 Row控件左右对齐 调整边距 1.页面跳转 首先,先介绍一下页面跳转功能吧 Flutter使用 Navigator 进行页面…...

快手前端通用静态托管服务KFX演进历程:从崎岖土路到平坦高速

快手静态部署托管服务(KFX)历经四年发展,经历了三个阶段,一步步从勉强能行车的“崎岖土路”到现在多车道并行的“平坦高速”,这一转变极大地提升了资源利用率和效率,满足业务的实际需要。本文将带你了解其背…...

hackmyvm-buster

题目地址 信息收集 主机发现 ┌──(root㉿kali)-[/home/kali] └─# arp-scan -I eth1 192.168.56.0/24 Interface: eth1, type: EN10MB, MAC: 00:0c:29:34:da:f5, IPv4: 192.168.56.103 WARNING: Cannot open MAC/Vendor file ieee-oui.txt: Permission denied WARNING: C…...

React加TypeScript最新部署完整版

React TypeScript 全流程部署指南 一、环境准备与项目初始化 关于node.js及npm的安装请参见我的文章。 1.1 创建项目(React TypeScript) # 使用官方推荐脚手架(Vite 5.x) npx create-vitelatest my-app --template react-ts …...

DeepSeek-R1-Zero:基于基础模型的强化学习

注:此文章内容均节选自充电了么创始人,CEO兼CTO陈敬雷老师的新书《自然语言处理原理与实战》(人工智能科学与技术丛书)【陈敬雷编著】【清华大学出版社】 文章目录 DeepSeek大模型技术系列四DeepSeek大模型技术系列四》DeepSeek-…...

python的列表和元组别再傻傻分不清啦

目录 什么是下标: 正数索引:正数索引从左到右,从 0 开始。 负数索引:负数索引从右到左,从 -1 开始。 切片(slice):除了单个元素,Python还支持通过切片访问序列的子集。…...

Fiddler在Windows下抓包Https

文章目录 1.Fiddler Classic 配置2.配置浏览器代理自动代理手动配置浏览器代理 3.抓取移动端 HTTPS 流量(可选)解决抓取 HTTPS 失败问题1.Fiddler证书过期了 默认情况下,Fiddler 无法直接解密 HTTPS 流量。需要开启 HTTPS 解密: 1…...

【超详细】神经网络的可视化解释

《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...

LVS+Keepalived 高可用集群搭建

一、高可用集群: 1.什么是高可用集群: 高可用集群(High Availability Cluster)是以减少服务中断时间为目地的服务器集群技术它通过保护用户的业务程序对外不间断提供的服务,把因软件、硬件、人为造成的故障对业务的影响…...

使用git管理uniapp项目

1.本地管理 1. 在项目根目录中新建 .gitignore 忽略文件,并配置如下: # 忽略 node_modules 目录 /node_modules /unpackage/dist 2. 打开终端,切换到项目根目录中,运行如下的命令,初始化本地 Git 仓库&#xff1…...

回调函数的用法

回调函数的基本用法 回调函数是一种被作为参数传递给另一个函数的函数,接收回调函数作为参数的函数在合适的时候会调用这个回调函数。回调函数为代码提供了更高的灵活性和可扩展性,下面为你详细介绍回调函数的基本用法。 基本概念 回调函数的核心在于函…...

样式垂直居中,谁才是王者

样式垂直居中,谁才是王者 面试官 常问如何让元素垂直居中,这其实是个经典的前端问题。 实现垂直居中的方法多种多样,从传统的表格布局到现代的Flexbox、Grid布局,再到绝对定位配合transform,甚至是line-height技巧&am…...

五、Three.js顶点UV坐标、纹理贴图

一部分来自1. 创建纹理贴图 | Three.js中文网 ,一部分是自己的总结。 一、创建纹理贴图 注意:把一张图片贴在模型上就是纹理贴图 1、纹理加载器TextureLoader 注意:将图片加载到加载器中 通过纹理贴图加载器TextureLoader的load()方法加…...

Linux Kernel Connection Tracking Table

在 Linux 内核中,连接跟踪表(Connection Tracking Table,简称 conntrack)是一个用于跟踪网络连接状态的核心组件。它主要由 Netfilter 框架管理,广泛应用于防火墙、NAT(网络地址转换)和负载均衡…...

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

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

JVM生产环境问题定位与解决实战(二):JConsole、VisualVM到MAT的高级应用

生产问题定位指南:几款必备的可视化工具 引言 在上一篇文章中,详细的介绍了JDK自带的一系列命令行工具,,如jps、jmap、jstat、jstack以及jcmd等,这些工具为排查和诊断Java虚拟机(JVM)问题提供…...

【深入理解JWT】从认证授权到网关安全

最近的项目学习中,在进行登陆模块的用户信息验证这一部分又用到了JWT的一些概念和相关知识,特在此写了这篇文章、方便各位笔者理解JWT相关概念 目录 先来理解JWT是什么? 区分有状态认证和无状态认证 有状态认证 VS 无状态认证 JWT令牌的…...

esp工程报错:something went wrong when trying to build the project esp-idf 一种解决办法

最近上手了正点原子esp32s3板子,环境采用的是vscodeesp-idf插件。导入了正点原子的demo测试,每次都报这个错误无法建造。也不是网上说的ninja error,不是中文路径的问题。 在终端中查看,发现是缺少了git。(我这里没有…...

基于MATLAB红外弱小目标检测MPCM算法复现

摘要:本文详细介绍了一种基于人类视觉系统特性的红外弱小目标检测算法——Multiscale patch-based contrast measure (MPCM)。该算法通过增强目标与背景的对比度,有效检测红外图像中的弱小目标,并在MATLAB环境中进行了复现与实验验证。 关键…...

java基础面试篇

目录 1.概念 1.1说一下Java的特点 1.2Java为什么是跨平台的? 1.3 JVM、JDK、JRE三者关系? 1.4为什么Java解释和编译都有? 1.5 jvm是什么? 1.6 编译型语言和解释型语言的区别? 1.7 Python和Java区别是什么&#…...

Java Map实现类面试题

Java Map实现类面试题 HashMap Q1: HashMap的实现原理是什么? HashMap基于哈希表实现,使用数组链表红黑树(Java 8)的数据结构。 public class HashMapPrincipleExample {// 模拟HashMap的基本结构public class SimpleHashMap&…...

Vue2+Three.js加载并展示一个三维模型(提供Gitee源码)

目录 一、案例截图 二、安装Three.js 三、代码实现 四、Gitee源码 一、案例截图 二、安装Three.js npm install three 三、代码实现 模型资源我是放在public文件夹下面的&#xff1a; 完整代码&#xff1a; <template><div><div ref"container&qu…...

Spark内存并行计算框架

spark核心概念 spark集群架构 spark集群安装部署 spark-shell的使用 通过IDEA开发spark程序 1. Spark是什么 Apache Spark™ is a unified analytics engine for large-scale data processingspark是针对于大规模数据处理的统一分析引擎 spark是在Hadoop基础上的改进&…...

DeepSeek等LLM对网络安全行业的影响

大家好,我是AI拉呱,一个专注于人工智领域与网络安全方面的博主,现任资深算法研究员一职,兼职硕士研究生导师;热爱机器学习和深度学习算法应用,深耕大语言模型微调、量化、私域部署。曾获多次获得AI竞赛大奖,拥有多项发明专利和学术论文。对于AI算法有自己独特见解和经验…...

【QT】QLinearGradient 线性渐变类简单使用教程

目录 0.简介 1&#xff09;qtDesigner中 2&#xff09;实际执行 1.功能详述 3.举一反三的样式 0.简介 QLinearGradient 是 Qt 框架中的一个类&#xff0c;用于定义线性渐变效果&#xff08;通过样式表设置&#xff09;。它可以用来填充形状、背景或其他图形元素&#xff0…...

可狱可囚的爬虫系列课程 15:防盗链反爬虫的处理

一、防盗链了解 防盗链是一种技术手段&#xff0c;主要用于防止其他网站通过直接链接的方式使用本网站的资源&#xff08;如图片、文件等&#xff09;&#xff0c;从而节省带宽和服务器资源。当其他网站尝试直接链接到受保护的资源时&#xff0c;服务器会根据设置的规则判断请求…...

Vue组件:从使用到原理的深度解析

一、什么是Vue组件&#xff1f; 组件是Vue的核心特性之一&#xff0c;它允许开发者将UI拆分为独立可复用的代码片段。每个组件本质上是一个Vue实例&#xff0c;具有自己的&#xff1a; 模板&#xff08;Template&#xff09; 数据&#xff08;Data&#xff09; 方法&#xf…...

SpringBoot接入DeepSeek(硅基流动版)+ 前端页面调试

文章目录 前言正文一、项目环境二、项目代码2.1 pom.xml2.2 DeepSeekController.java2.3 启动类2.4 logback-spring.xml2.5 application.yaml2.6 index.html 三、页面调试3.1 参数提示3.2 开始请求3.3 手动断开 前言 作为一个Java程序员&#xff0c;了解前沿科技技术&#xff…...

Lua的table(表)

Lua表的基本概念 Lua中的表&#xff08;table&#xff09;是一种多功能数据结构&#xff0c;可以用作数组、字典、集合等。表是Lua中唯一的数据结构机制&#xff0c;其他数据结构如数组、列表、队列等都可以通过表来实现。 表的实现 Lua的表由两部分组成&#xff1a; 数组部分…...

图片爬取案例

修改前的代码 但是总显示“失败” 原因是 修改之后的代码 import requests import os from urllib.parse import unquote# 原始URL url https://cn.bing.com/images/search?viewdetailV2&ccidTnImuvQ0&id5AE65CE4BE05EE7A79A73EEFA37578E87AE19421&thidOIP.TnI…...

【Python爬虫(90)】以Python爬虫为眼,洞察金融科技监管风云

【Python爬虫】专栏简介:本专栏是 Python 爬虫领域的集大成之作,共 100 章节。从 Python 基础语法、爬虫入门知识讲起,深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑,覆盖网页、图片、音频等各类数据爬取,还涉及数据处理与分析。无论是新手小白还是进阶开发…...

idea + Docker + 阿里镜像服务打包部署

一、下载docker desktop软件 官网下载docker desktop&#xff0c;需要结合wsl使用 启动成功的画面(如果不是这个画面例如一直处理start或者是stop需要重新启动&#xff0c;不行就重启电脑) 打包成功的镜像在这里&#xff0c;如果频繁打包会导致磁盘空间被占满&#xff0c;需…...

C#模拟退火算法

模拟退火算法&#xff1a;寻找最优解的神奇 “退火之旅” 在生活中&#xff0c;我们都见过铁匠打铁。铁匠把烧得通红的铁块不断捶打&#xff0c;然后慢慢冷却&#xff0c;这样打造出来的金属制品才更坚固耐用。模拟退火算法就从这个退火过程中获得灵感&#xff0c;在计算机的数…...

网络安全防御模型

目录 6.1 网络防御概述 一、网络防御的意义 二、被动防御技术和主动防御技术 三、网络安全 纵深防御体系 四、主要防御技术 6.2 防火墙基础 一、防火墙的基本概念 二、防火墙的位置 1.防火墙的物理位置 2.防火墙的逻辑位置 3. 防火墙的不足 三、防火墙技术类型 四…...

APP自动化实战

APP自动化能做什么&#xff1f; 请看示例&#xff08;实现批量的视频&#xff0c;封面功能复用能力&#xff08;实现效果参考抖音号&#xff1a;71403700901&#xff09; APP自动化实战&#xff0d;操作剪映APP PO模式 1. PO模式介绍 PO&#xff08;Page Object&#xff09;…...

Unity基础——资源导入

一.资源来源 1.Assert Store&#xff08;Unity资源官方网站&#xff09; &#xff08;1&#xff09;用于制作游戏的优质资源 | Unity Asset Store &#xff08;2&#xff09;或则通过Unity项目打开 2.外部资源 &#xff08;1&#xff09;淘宝 &#xff08;2&#xff09;找外…...

JMeter性能问题

性能测试中TPS上不去的几种原因 性能测试中TPS上不去的几种原因_tps一直上不去-CSDN博客 网络带宽 连接池 垃圾回收机制 压测脚本 通信连接机制 数据库配置 硬件资源 压测机 业务逻辑 系统架构 CPU过高什么原因 性能问题分析-CPU偏高 - 西瓜汁拌面 - 博客园 US C…...

形式化数学编程在AI医疗中的探索路径分析

一、引言 1.1 研究背景与意义 在数字化时代,形式化数学编程和 AI 形式化医疗作为前沿领域,正逐渐改变着我们的生活和医疗模式。形式化数学编程是一种运用数学逻辑和严格的形式化语言来描述和验证程序的技术,它通过数学的精确性和逻辑性,确保程序的正确性和可靠性。在软件…...

DeepSeek开源周Day1:FlashMLA引爆AI推理性能革命!

项目地址&#xff1a;GitHub - deepseek-ai/FlashMLA 开源日历&#xff1a;2025-02-24起 每日9AM(北京时间)更新&#xff0c;持续五天&#xff01; ​ 一、开源周震撼启幕 继上周预告后&#xff0c;DeepSeek于北京时间今晨9点准时开源「FlashMLA」&#xff0c;打响开源周五连…...

nginx 配置https

参考文档&#xff1a;nginx 文档 -- nginx官网|nginx下载安装|nginx配置|nginx教程 配置 HTTPS 服务器 HTTPS 服务器优化 SSL 证书链 单个 HTTP/HTTPS 服务器 基于名称的 HTTPS 服务器 具有多个名称 的 SSL 证书 服务器名称指示 兼容性 要配置 HTTPS 服务器&#xff0c;ssl…...

GhostBottleneck; InvertedResidual;Squeeze and Excite 是什么,怎么用

GhostBottleneck; InvertedResidual;Squeeze and Excite 是什么,怎么用 目录 GhostBottleneck; InvertedResidual;Squeeze and Excite 是什么,怎么用GhostBottleneckInvertedResidualSqueeze and Excite(SE)GhostBottleneck 概念: GhostBottleneck 是在轻量级神经网…...

Docker启动ES容器打包本地镜像

文章目录 1、安装 Docker2、下载镜像3、查看已下载的镜像4、 保存和加载镜像5、.tar 文件与 Docker 镜像的关系6、如何从 .tar 文件加载 Docker 镜像7、为什么需要 .tar 文件&#xff1f;8、ES 8.x版本无法启动8.1 问题原因8.2 解决方案8.3 提交容器为新镜像 1、安装 Docker 如…...

XXE漏洞:原理、危害与修复方法详解

目录 一、XXE漏洞概述二、XXE漏洞原理三、XXE漏洞危害1. 任意文件读取2. 命令执行3. 拒绝服务攻击(DoS)4. SSRF攻击四、XXE漏洞修复方法1. 禁用外部实体JavaPythonPHP2. 输入验证和过滤3. 安全配置服务器4. 升级解析器版本五、总结一、XXE漏洞概述 XXE(XML External Entity…...