React系列面试题
大家好,我是有用就点赞,有用就扩散。
1.React的组件间通信都有哪些形式?
- 父传子:在React中,父组件调用子组件时可以将要传递给子组件的数据添加在子组件的属性中,在子组件中通过props属性进行接收。这个就是父组件向子组件通信。
- 子传父:React是单向数据流,数据永远只能自上向下进行传递。当子组件中有些数据需要向父级进行通信时,需要在父级中定义好回调,将回调传递给子组件,子组件调用父级传递过来的回调方法进行通信。
- 跨组件通信,context。使用context API,可以在组件中向子孙级组件进行信息传递。
2.React中如何实现路由懒加载?
在React16中,新增了lazy方法,通过lazy方法可以轻松实现组件懒加载,当然要实现路由懒加载的话,其实也只需要把路由组件结合lazy使用即可。
在下述代码中,我们使用lazy引入了一个动态组件,然后将该组件放入了根路由中,这样的话只有用户访问网站首页时,才会动态加载这个组件。
**注意事项:**在React规范中,lazy和Suspense必须配合使用,lazy引入的动态组件必须要放入Suspense中,Suspense的fallback属性是lazy的组件没有加载进来之前的占位内容。
import {Route} from "react-router-dom"
import React,{Suspense} from "react"
const HomeView = React.lazy(()=>import("./home"))
const App = ()=> {return (<div><h1>路由懒加载</h1><Route path="/" exact render={()=>{return (<Suspense fallback={<div>组件Loading进来之前的占位内容</div>}><HomeView/></Suspense>)}} /></div>)
}
export default App
3.React的生命周期函数都有哪些?分别有什么作用?
React的生命周期已经历经了3次改动,我们以最新的版本为准。
在16.3版本之前,constructor初始化之后是使用到是componentDidMount这个生命周期。
在16.3版本,后面发现componentDidMount这个函数有没有都没有区别,添加了getDerivedStateFromProps函数,影响的是挂载时和父组件更新时的生命周期函数。
16.4版本之后,getDeriveStateFromProps函数,影响的是挂载时和父组件和本身组件更新时的生命周期函数。
挂载阶段:
- constructor:初始化组件,初始化组件的state等。
- static getDerivedStateFromProps():该函数用于将props中的信息映射到state中。
- render:生成虚拟DOM。
- componentDidMount:组件挂载完成,通过在该函数中去处理副作用。
更新阶段:
- static getDerivedStateFromProps()
- shouldComponentUpdate():该生命周期函数用于判断是否要进行组件更新。
- render():生成虚拟DOM
- getSnapshotBeforeUpdate():组件已经完成diff,即将更新真实DOM,用户获取上一次的DOM快照。该函数必须搭配componentDidUpdate一块使用,返回值会变成componentDidUpdate第三个参数。
- componentDidUpdate():组件更新完成,通常在该函数中进行副作用处理。
即将卸载:
- compoentWillUnmount:组件即将卸载,用于删除组件添加到全局的数据或事件。
4.说一下React Hooks在平时开发中需要注意的问题和原因?
React Hooks在使用时注意事项:
- 只能在React函数中使用(函数式组件或自定义hook)。
- 只能在函数最外层调用hook,不能包括在if,for等语句中或者子函数中。
- useState中存储的是引用类型的数据时,修改state时,一定要返回新的引用。
原因:
- Hooks专为函数组件的逻辑复用而设计所以只能用在函数式组件和自定义hooks。
- hooks在调用的时候,需要确保先后调用顺序,一个顺序出问题,会导致整个程序的混乱。
- 如果在useState中存储的是引用类型,更新时不更引用地址时的话,React会认为我们没有更新数据,则不进行组件更新。
5.setState是同步还是异步?
React可以检测到的时候是异步,React检测不到时是同步
源码相关的方法:batch updater
监听的主要是:isBatchUpdater = true
在批量更新机制下会检测到,所以这个时候setState是异步的,或者其他React自带函数使用的时候会检测到。
使用setTimeout或者在使用生命周期的时候使用事件,此时的isBatchUpdater会原来的true变成false,所以这个时候setState是同步的。
6.React逻辑复用
复用的4种方式:
直接把相同的代码复制一份到需要使用的组件种(非常low的方式)
创建一个高阶组件,将复用的组件存放到高阶组件中,需要使用的组件直接复用
高阶组件(HOC)的注意事项:
(1)不要在render方法内使用高阶组件,因为每次高阶组件返回的都是不同的组件,会造成不必要的渲染
(2)必须将静态方法做拷贝
HOC带来的问题:
(1)当存在多个HOC时,不知道props是从哪里来
(2)和Mixin一样,存在相同名称的props,则存在覆盖问题,而且react并不会报错
(3)JSX层次中多了很多层次(即无用的空组件),不利于调试
(4)HOC属于静态构建,静态构建即是重新生成一个组件,即返回的新组件,不会马上渲染,即新组件中定义的生命周期函数只有新组件被渲染时才会执行。
使用render函数使组件达到复用
使用自定义hooks
(1)自定义hook可以在不增加组件的情况下达到同样的目的
(2)hook是一种复用的状态逻辑的方式,它不复用state本身
(3)事实上hook的每次调用都有一个完全独立的state
(4)自定义hook更像是一种约定,而不是一种功能。如果函数的名字以use开头,并且调用了其他的hook,则就称其为一个自定义hook
7.在React中,针对类组件和函数组件,分别怎么去进行性能优化?
- 在类组件中可以使用shouldComponentUpdate或者PureComponent
- 在函数组件中则可以使用memo(引用类型的时候在包裹一层)
8.请结合React Router实现React项目的路由守卫
React实现路由拦截的基本思路还是利用Route的render函数,通过判断拦截条件来实现不同的组件的跳转,从而实现拦截
9.是否使用过React Portals,在什么场景下使用?
Portal提供了一种将子节点渲染到存在于父组件以外的DOM节点的优秀方案。
场景:
一个Portal的典型用例是当父组件有overflow:hidden或z-index样式时,需要子组件能够在视觉上“跳出”其容器。例如:对话框、悬浮卡以及提示框
10.在函数组件中,如何获取组件更新前的state?
可以利用useRef保存state,当useRef存储的是数据,数据不会随着组件的更新而自动更新,要想获取组件更新前的state,在useEffect里面监听state的变化,从而把之前的state赋值给useRef定义的数据,达到获取组件更新前的state。
关于各位大哥投稿PR。
相关文章:
React系列面试题
大家好,我是有用就点赞,有用就扩散。 1.React的组件间通信都有哪些形式? 父传子:在React中,父组件调用子组件时可以将要传递给子组件的数据添加在子组件的属性中,在子组件中通过props属性进行接收。这个就…...
C#:通用方法总结—第6集
大家好,今天继续介绍我们的通用方法系列。 下面是今天要介绍的通用方法: (1)这个通用方法为SW查找草图数量 /// <summary> /// 查找草图数量 /// </summary> /// <param name"doc2"></param>…...
Spark实时(一):StructuredStreaming 介绍
文章目录 Structured Streaming 介绍 一、SparkStreaming实时数据处理痛点 1、复杂的编程模式 2、SparkStreaming处理实时数据只支持Processing Time 3、微批处理,延迟高 4、精准消费一次问题 二、StructuredStreaming架构与场景应用 三、…...
LangChain4j-RAG基础
RAG是什么 简而言之,RAG 是一种在将数据发送到 LLM 之前从数据中查找相关信息并将其注入到提示中的方法。这样LLM将获得(希望)相关信息,并能够使用这些信息进行回复,这应该会减少产生幻觉的可能性。 实现方法: 全文…...
git--本地仓库修改同步到远程仓库
尝试将本地分支推送到远程仓库时,出现一个非快速前进的错误。通常是因为远程仓库中的分支包含本地分支没有的提交。在推送之前,需要将远程仓库的更改合并到本地分支。 解决步骤如下: 切换到你的本地分支: 确保处于想要推送的分支…...
剑和沙盒 3 - 深度使用和解析Windows Sandbox
介绍 两年前,微软作为Insiders build 18305的一部分发布了一项新功能- Windows Sandbox。 该沙箱具有一些有用的规格: Windows 10(Pro/Enterprise)的集成部分。在 Hyper-V 虚拟化上运行。原始且可抛弃 – 每次运行时都干净地开…...
深度学习loss
pytorch模型训练demo代码 在PyTorch中,模型训练通常涉及几个关键步骤:定义模型、定义损失函数、选择优化器、准备数据加载器、编写训练循环。以下是一个简单的PyTorch模型训练演示代码,该代码实现了一个用于手写数字识别(使用MNIS…...
编写一个Chrome插件,网页选择文字后,右键出现菜单“search with bing”,选择菜单后用bing搜索文字
kimi ai 生成,测试可用,需要自行准备图标文件 创建一个简单的Chrome插件来实现选择文本后的搜索功能,你需要完成以下几个步骤: 创建插件的基础文件夹和文件: 创建一个文件夹用于存放插件的所有文件。在该文件夹中创建以…...
【算法】分割回文串
难度:中等 题目: 给你一个字符串 s,请你将 s 分割成一些子串,使每个子串都是 回文串。返回 s 所有可能的分割方案。 示例 1: 输入:s = “aab” 输出:[[“a”,“a”,“b”],[“aa”,“b”]] 示例 2: 输入:s = “a” 输出:[[“a”]] 提示: 1 <= s.length <…...
lua 游戏架构 之 游戏 AI (三)ai_attack
这段Lua脚本定义了一个名为 ai_attack 的类,继承自 ai_base 类。 lua 游戏架构 之 游戏 AI (一)ai_base-CSDN博客文章浏览阅读119次。定义了一套接口和属性,可以基于这个基础类派生出具有特定行为的AI组件。例如,可以…...
大数据之Oracle同步Doris数据不一致问题
数据同步架构如下: 出现的问题: doris中的数据条数 源库中的数据条数 总数完全不一致。 出现问题的原因: 在Dinky中建立表结构时,缺少对主键属性的限制 primary key(ID) not enforced 加上如上语句,数据条数解决一致 …...
visual studio 问题总结
一. Visual Studio: 使用简体中文(GB2312)编码加载文件, 有些字节已用Unicode替换字符更换 解决方法:vs 工具-》选项-》文本编辑器...
go-错误码的最佳实践
一、背景 在工程开发中,我们有以下场景可以用错误码解决 我们不太方便直接将内部的错误原因暴露给外部,可以根据错误码得到对应的外部暴露消息通过设定错误码判断是客户端或者服务端的问题,避免不必要的排障浪费方便查找日志,定…...
Python面试题:使用Matplotlib和Seaborn进行数据可视化
使用Matplotlib和Seaborn进行数据可视化是数据分析中非常重要的一部分。以下示例展示了如何使用这两个库来创建各种图表,包括基本的线图、柱状图、散点图和高级的分类数据可视化图表。 安装 Matplotlib 和 Seaborn 如果你还没有安装这两个库,可以使用以…...
模拟实现c++中的vector模版
目录 一vector简述: 二vector的一些接口函数: 1初始化: 2.vector增长: 3vector增删查改: 三vector模拟实现部分主要函数: 1.size,capacity,empty,clear接口: 2.reverse的实现࿱…...
uniapp安卓通过绝对路径获取文件
uniapp安卓通过绝对路径获取文件 在uniapp中,如果你想要访问安卓设备上的文件,你需要使用uniapp提供的plus.io API。这个API允许你在应用内访问设备的文件系统。 以下是一个示例代码,展示了如何使用plus.io API来获取文件: fun…...
Known框架实战演练——进销存业务单据
本文介绍如何实现进销存管理系统的业务单据模块,业务单据模块包括采购进货单、采购退货单、销售出货单、销售退货单4个菜单页面。由于进销单据字段大同小异,因此设计共用一个页面组件类。 项目代码:JxcLite开源地址: https://git…...
解决npm依赖树冲突的方法以及npm ERR! code ERESOLVE错误的解决方案
一、问题描述 在使用ng new myapp --skip-install 构建Angular 项目后,尝试用npm install 安装依赖的时候报了以下错误。 (base) PS C:\Users\Administrator\Desktop\agtest\myapp> npm i npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependenc…...
Spring Boot + Spring Batch + Quartz 整合定时批量任务
博客主页: 南来_北往 系列专栏:Spring Boot实战 前言 最近一周,被借调到其他部门,赶一个紧急需求,需求内容如下: PC网页触发一条设备升级记录(下图),后台要定时批量设备更…...
C++STL简介(二)
目录 1.模拟实现string 1.string基本属性和大体框架 2.基本函数 2.1size() 2.2 [] 2.3 begin() 和end() 2.4capacity() 2.5 reserve 2.6push_back 2.7 append 2.8 2.9insert 2.10find 2.11substr 2.12 2.12 < …...
嵌入式高频面试题100道及参考答案(3万字长文)
目录 解释嵌入式系统的定义和主要特点 描述微处理器与微控制器的主要区别 什么是ARM体系结构?它在嵌入式系统中有哪些优势? 解释GPIO(通用输入输出)的工作原理 什么是ADC和DAC?它们在嵌入式系统中的作用是什么? 解释中断的概念及其在实时系统中的重要性 描述SPI(串…...
python爬虫-事件触发机制
今天想爬取一些政策,从政策服务 (smejs.cn) 这个网址爬取,html源码找不到链接地址,通过浏览器的开发者工具,点击以下红框 分析预览可知想要的链接地址的id有了,进行地址拼接就行 点击标头可以看到请求后端服务器的api地…...
LeetCode-day27-3106. 满足距离约束且字典序最小的字符串
LeetCode-day27-3106. 满足距离约束且字典序最小的字符串 题目描述示例示例1:示例2:示例3: 思路代码 题目描述 给你一个字符串 s 和一个整数 k 。 定义函数 distance(s1, s2) ,用于衡量两个长度为 n 的字符串 s1 和 s2 之间的距…...
C++中的static_cast函数
static_cast 是 C 中的一个类型转换操作符,用于在编译时进行类型转换。它主要用于基本数据类型之间的转换,以及类的指针或引用之间的向上转换(将派生类指针或引用转换为基类指针或引用)和某些情况下的向下转换(将基类指…...
从零开始学习网络安全渗透测试之基础入门篇——(二)Web架构前后端分离站Docker容器站OSS存储负载均衡CDN加速反向代理WAF防护
Web架构 Web架构是指构建和管理Web应用程序的方法和模式。随着技术的发展,Web架构也在不断演进。当前,最常用的Web架构包括以下几种: 单页面应用(SPA): 特点:所有用户界面逻辑和数据处理都包含…...
2679. 矩阵中的和
两种方法: 第一种:先对二维列表的每一列进行排序,然后对每一列的数据进行逐个比较,找出最大值。 class Solution:def matrixSum(self, nums: list[list[int]]) -> int:result0mlen(nums)nlen(nums[0])for i in range(m):nums…...
Unity Playables:下一代动画与音频序列
Unity的Playables API是一种灵活的系统,用于创建和控制动画、音频以及其他形式的连续媒体序列。它为开发者提供了一种全新的方法来处理游戏中的时间序列,包括动画、音频、特效等。本文将探讨Playables的基本概念、如何使用Playables API实现动画…...
matlab仿真 模拟调制(下)
(内容源自详解MATLAB/SIMULINK 通信系统建模与仿真 刘学勇编著第五章内容,有兴趣的读者请阅读原书) clear all ts0.001; t0:ts:10-ts; fs1/ts; dffs/length(t); msgrandi([-3 3],100,1); msg1msg*ones(1,fs/10); msg2reshape(ms…...
RabbitMQ是什么?
RabbitMQ是一个开源的消息代理软件(Message Broker),它实现了高级消息队列协议(AMQP,Advanced Message Queuing Protocol),并支持多种消息传递协议。它最初由英国的Rabbit Technologies开发&…...
追问试面试系列:分布式id
hi 大家好,欢迎来到追问试面试系列:分布式id 面试中可能面试官不会直接问你分布式id问题,基本上都是因为你在某些面试题回答中提到了,所以就开始追问分布式id相关问题。 先看面试题 ● 面试官:什么是分布式id? ● 面试官:举个例子说说 ● 面试官:什么叫分库分表? ●…...
护网紧急情况应对指南:Linux 应急响应手册
继上一篇:护网紧急情况应对指南:Windows版v1.2全新升级版 之后 收到小伙伴后台要Linux应急手册,今天给大家安排上。 《Linux应急手册》是一本为Linux系统管理员和运维工程师量身打造的实用指南,旨在帮助他们快速应对各种突发状况…...
WEB攻防-通用漏洞-SQL 读写注入-MYSQLMSSQLPostgreSQL
什么是高权限注入 高权限注入指的是攻击者通过SQL注入漏洞,利用具有高级权限的数据库账户(如MYSQL的root用户、MSSQL的sa用户、PostgreSQL的dba用户)执行恶意SQL语句。这些高级权限账户能够访问和修改数据库中的所有数据,甚至执行…...
【前端学习笔记】CSS基础一
一、什么是CSS 1.CSS 介绍 CSS(Cascading Style Sheets,层叠样式表)是一种用来控制网页布局和设计外观的样式语言。它使得开发者可以分离网页的内容(HTML)和表现形式(样式),提高了…...
Github遇到的问题解决方法总结(持续更新...)
1.github每次push都需要输入用户名和token的解决方法 push前,执行下面命令 : git config --global credential.helper store 之后再输入一次用户名和token之后,就不用再输入了。 2.git push时遇到“fatal: unable to access https://githu…...
数字信封+数字签名工具类测试样例(Java实现)
加解密过程 加密: 生成加密方SM2密钥对用于签名使用生成的SM2私钥生成数字签名生成SM4对称密钥对明文进行对称加密使用与解密方提前约定好的SM2公钥对第三步中的SM4对称密钥进行非对称加密把【加密方SM2公钥】、【数字签名】、【SM4对称加密后的密文】和【SM2非对…...
The Schematic workflow failed. See above.
在使用 ng new 新建Angular项目的时候会报一个错误:The Schematic workflow failed. See above. 解决办法: 只需要在后面加上 --skip-install 参数,就不会报错了。 ng new myapp --skip-install...
操作系统面试知识点总结4
#来自ウルトラマンメビウス(梦比优斯) 1 文件系统基础 1.1 文件的相关概念 文件是以计算机硬盘为载体的存储在计算机上的信息集合,可以是文本文档、图片、程序。 文件的结构:数据项、记录、文件(有结构文件、无结构式…...
Lua实现面向对象以及类的继承
0.简单前言 1、面向对象主要四个特征:封装,继承,多态,抽象 2、Lua是种简单精致小巧的语言,其本质是个表(table),变量和方法皆可看作为该表的元素。 P.S. 该博客和代码为个人编写习…...
机器学习课程学习周报五
机器学习课程学习周报五 文章目录 机器学习课程学习周报五摘要Abstract一、机器学习部分1.1 向量序列作为模型输入1.1.1 文字的向量表达1.1.2 语音的向量表达 1.2 自注意力机制原理1.2.1 自注意力机制理论1.2.2 矩阵运算自注意力机制 1.3 多头自注意力1.4 位置编码1.5 截断自注…...
vue3.0学习笔记(二)——生命周期与响应式数据(ref,reactive,toRef,toRefs函数)
1. 组合API-setup函数 使用细节: setup 是一个新的组件选项,作为组件中使用组合API的起点。从组件生命周期来看,它的执行在组件实例创建之前vue2.x的beforeCreate执行。这就意味着在setup函数中 this 还不是组件实例,this 此时是…...
C++——QT:保姆级教程,从下载到安装到用QT写出第一个程序
登录官网,在官网选择合适的qt版本进行下载 这里选择5.12.9版本 点击exe文件下载,因为服务器在国外,国内不支持,所以可以从我的网盘下载 链接: https://pan.baidu.com/s/1XMILFS1uHTenH3mH_VlPLw 提取码: 1567 --来自百度网盘超级…...
掌握互联网路由选择协议:从基础入门到实战
文章目录 路由选择协议的基本概念路由选择算法的分类分层次的路由选择协议路由信息协议(RIP)内部网关协议:OSPF外部网关协议:BGP互联网中的实际应用总结 互联网的路由选择协议是网络通信的核心,它决定了数据包如何在网…...
[笔记]ONVIF服务端实现[进行中...]
1.文档搜索: 从:https://www.cnblogs.com/liwen01/p/17337916.html 跳转到了:ONVIF协议网络摄像机(IPC)客户端程序开发(1):专栏开篇_onvif 许振坪-CSDN博客 1.1原生代码支持&…...
深度强化学习 ②(DRL)
参考视频:📺王树森教授深度强化学习 前言: 最近在学习深度强化学习,学的一知半解😢😢😢,这是我的笔记,欢迎和我一起学习交流~ 这篇博客目前还相对比较乱,后面…...
线性代数重要知识点和理论(下)
奇异值分解 奇异值分解非常重要且有趣。首先对于 n n n\times n nn对称矩阵 A A A,可以通过对角化得到其对角化形式 A P D P − 1 APDP^{-1} APDP−1,但是如果 A A A不是对称矩阵或者不是方阵,则不能进行对角化,但是可以通过奇…...
独立开发者系列(35)——python环境的理解
新手阶段,为了快速入门,基本都是直接开始写python代码实现自己想要的效果,类似搭建博客,写个web服务器,搭建简易聊天室,偶尔也写些爬虫,或者使用pygame写个简单小游戏,也有tk库做点简…...
中小企业常见的网络安全问题及防范措施
在数字化浪潮的推动下,我国中小企业的信息化建设取得了显著成就。然而,随着网络安全形势的日益严峻,中小企业在网络安全方面的短板逐渐暴露出来。本文将从中小企业网络安全现状出发,深入剖析其存在的问题,并提出针对性…...
Android 线程并发:线程通信:Handler机制
文章目录 API源码分析操作总结 API Handler相关 Handler对象.sendMessage(Message) 发送消息 Handler对象.handleMessage()空方法 自定义Handler重写handleMessage方法,处理Message Looper相关 Looper.getMainLooper() 获取App的UI线程的Looper对象 Looper…...
搭建自己的金融数据源和量化分析平台(三):读取深交所股票列表
深交所的股票信息读取比较简单: 看上图,爬虫读取到下载按钮的链接之后发起请求,得到XLS文件后直接解析就可以了。 这里放出深交所爬虫模块的代码: # -*- coding: utf-8 -*- # 深圳交易所爬虫 import osimport pandas as pd imp…...
企业级视频拍摄与编辑SDK的全面解决方案
视频已成为企业传播信息、展示品牌、连接用户的重要桥梁,如何高效、专业地制作高质量视频内容,成为众多企业面临的共同挑战。美摄科技,作为视音频技术领域的创新先锋,以其强大的视频拍摄与编辑SDK,为企业量身打造了一站…...