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

React系列面试题

大家好,我是有用就点赞,有用就扩散。

1.React的组件间通信都有哪些形式?

  1. 父传子:在React中,父组件调用子组件时可以将要传递给子组件的数据添加在子组件的属性中,在子组件中通过props属性进行接收。这个就是父组件向子组件通信。
  2. 子传父:React是单向数据流,数据永远只能自上向下进行传递。当子组件中有些数据需要向父级进行通信时,需要在父级中定义好回调,将回调传递给子组件,子组件调用父级传递过来的回调方法进行通信。
  3. 跨组件通信,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函数,影响的是挂载时和父组件和本身组件更新时的生命周期函数。

挂载阶段:

  1. constructor:初始化组件,初始化组件的state等。
  2. static getDerivedStateFromProps():该函数用于将props中的信息映射到state中。
  3. render:生成虚拟DOM。
  4. componentDidMount:组件挂载完成,通过在该函数中去处理副作用。

更新阶段:

  1. static getDerivedStateFromProps()
  2. shouldComponentUpdate():该生命周期函数用于判断是否要进行组件更新。
  3. render():生成虚拟DOM
  4. getSnapshotBeforeUpdate():组件已经完成diff,即将更新真实DOM,用户获取上一次的DOM快照。该函数必须搭配componentDidUpdate一块使用,返回值会变成componentDidUpdate第三个参数。
  5. componentDidUpdate():组件更新完成,通常在该函数中进行副作用处理。

即将卸载:

  • compoentWillUnmount:组件即将卸载,用于删除组件添加到全局的数据或事件。

4.说一下React Hooks在平时开发中需要注意的问题和原因?

React Hooks在使用时注意事项:

  1. 只能在React函数中使用(函数式组件或自定义hook)。
  2. 只能在函数最外层调用hook,不能包括在if,for等语句中或者子函数中。
  3. useState中存储的是引用类型的数据时,修改state时,一定要返回新的引用。

原因:

  1. Hooks专为函数组件的逻辑复用而设计所以只能用在函数式组件和自定义hooks。
  2. hooks在调用的时候,需要确保先后调用顺序,一个顺序出问题,会导致整个程序的混乱。
  3. 如果在useState中存储的是引用类型,更新时不更引用地址时的话,React会认为我们没有更新数据,则不进行组件更新。

5.setState是同步还是异步?

React可以检测到的时候是异步,React检测不到时是同步

源码相关的方法:batch updater

监听的主要是:isBatchUpdater = true

在批量更新机制下会检测到,所以这个时候setState是异步的,或者其他React自带函数使用的时候会检测到。

使用setTimeout或者在使用生命周期的时候使用事件,此时的isBatchUpdater会原来的true变成false,所以这个时候setState是同步的。

6.React逻辑复用

复用的4种方式:

  1. 直接把相同的代码复制一份到需要使用的组件种(非常low的方式)

  2. 创建一个高阶组件,将复用的组件存放到高阶组件中,需要使用的组件直接复用

    高阶组件(HOC)的注意事项:

    (1)不要在render方法内使用高阶组件,因为每次高阶组件返回的都是不同的组件,会造成不必要的渲染

    (2)必须将静态方法做拷贝

    HOC带来的问题:

    (1)当存在多个HOC时,不知道props是从哪里来

    (2)和Mixin一样,存在相同名称的props,则存在覆盖问题,而且react并不会报错

    (3)JSX层次中多了很多层次(即无用的空组件),不利于调试

    (4)HOC属于静态构建,静态构建即是重新生成一个组件,即返回的新组件,不会马上渲染,即新组件中定义的生命周期函数只有新组件被渲染时才会执行。

  3. 使用render函数使组件达到复用

  4. 使用自定义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系列面试题

大家好&#xff0c;我是有用就点赞&#xff0c;有用就扩散。 1.React的组件间通信都有哪些形式&#xff1f; 父传子&#xff1a;在React中&#xff0c;父组件调用子组件时可以将要传递给子组件的数据添加在子组件的属性中&#xff0c;在子组件中通过props属性进行接收。这个就…...

C#:通用方法总结—第6集

大家好&#xff0c;今天继续介绍我们的通用方法系列。 下面是今天要介绍的通用方法&#xff1a; &#xff08;1&#xff09;这个通用方法为SW查找草图数量 /// <summary> /// 查找草图数量 /// </summary> /// <param name"doc2"></param>…...

Spark实时(一):StructuredStreaming 介绍

文章目录 Structured Streaming 介绍 一、SparkStreaming实时数据处理痛点 1、复杂的编程模式 2、SparkStreaming处理实时数据只支持Processing Time 3、微批处理,延迟高 4、精准消费一次问题 二、StructuredStreaming架构与场景应用 三、​​​​​​​​​​​​​​…...

LangChain4j-RAG基础

RAG是什么 简而言之&#xff0c;RAG 是一种在将数据发送到 LLM 之前从数据中查找相关信息并将其注入到提示中的方法。这样LLM将获得&#xff08;希望&#xff09;相关信息&#xff0c;并能够使用这些信息进行回复&#xff0c;这应该会减少产生幻觉的可能性。 实现方法: 全文…...

git--本地仓库修改同步到远程仓库

尝试将本地分支推送到远程仓库时&#xff0c;出现一个非快速前进的错误。通常是因为远程仓库中的分支包含本地分支没有的提交。在推送之前&#xff0c;需要将远程仓库的更改合并到本地分支。 解决步骤如下&#xff1a; 切换到你的本地分支&#xff1a; 确保处于想要推送的分支…...

剑和沙盒 3 - 深度使用和解析Windows Sandbox

介绍 两年前&#xff0c;微软作为Insiders build 18305的一部分发布了一项新功能- Windows Sandbox。 该沙箱具有一些有用的规格&#xff1a; Windows 10&#xff08;Pro/Enterprise&#xff09;的集成部分。在 Hyper-V 虚拟化上运行。原始且可抛弃 – 每次运行时都干净地开…...

深度学习loss

pytorch模型训练demo代码 在PyTorch中&#xff0c;模型训练通常涉及几个关键步骤&#xff1a;定义模型、定义损失函数、选择优化器、准备数据加载器、编写训练循环。以下是一个简单的PyTorch模型训练演示代码&#xff0c;该代码实现了一个用于手写数字识别&#xff08;使用MNIS…...

编写一个Chrome插件,网页选择文字后,右键出现菜单“search with bing”,选择菜单后用bing搜索文字

kimi ai 生成&#xff0c;测试可用&#xff0c;需要自行准备图标文件 创建一个简单的Chrome插件来实现选择文本后的搜索功能&#xff0c;你需要完成以下几个步骤&#xff1a; 创建插件的基础文件夹和文件&#xff1a; 创建一个文件夹用于存放插件的所有文件。在该文件夹中创建以…...

【算法】分割回文串

难度:中等 题目: 给你一个字符串 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 的类&#xff0c;继承自 ai_base 类。 lua 游戏架构 之 游戏 AI &#xff08;一&#xff09;ai_base-CSDN博客文章浏览阅读119次。定义了一套接口和属性&#xff0c;可以基于这个基础类派生出具有特定行为的AI组件。例如&#xff0c;可以…...

大数据之Oracle同步Doris数据不一致问题

数据同步架构如下&#xff1a; 出现的问题&#xff1a; doris中的数据条数 源库中的数据条数 总数完全不一致。 出现问题的原因&#xff1a; 在Dinky中建立表结构时&#xff0c;缺少对主键属性的限制 primary key(ID) not enforced 加上如上语句&#xff0c;数据条数解决一致 …...

visual studio 问题总结

一. Visual Studio: 使用简体中文&#xff08;GB2312&#xff09;编码加载文件, 有些字节已用Unicode替换字符更换 解决方法&#xff1a;vs 工具-》选项-》文本编辑器...

go-错误码的最佳实践

一、背景 在工程开发中&#xff0c;我们有以下场景可以用错误码解决 我们不太方便直接将内部的错误原因暴露给外部&#xff0c;可以根据错误码得到对应的外部暴露消息通过设定错误码判断是客户端或者服务端的问题&#xff0c;避免不必要的排障浪费方便查找日志&#xff0c;定…...

Python面试题:使用Matplotlib和Seaborn进行数据可视化

使用Matplotlib和Seaborn进行数据可视化是数据分析中非常重要的一部分。以下示例展示了如何使用这两个库来创建各种图表&#xff0c;包括基本的线图、柱状图、散点图和高级的分类数据可视化图表。 安装 Matplotlib 和 Seaborn 如果你还没有安装这两个库&#xff0c;可以使用以…...

模拟实现c++中的vector模版

目录 一vector简述&#xff1a; 二vector的一些接口函数&#xff1a; 1初始化&#xff1a; 2.vector增长&#xff1a; 3vector增删查改&#xff1a; 三vector模拟实现部分主要函数&#xff1a; 1.size,capacity,empty,clear接口&#xff1a; 2.reverse的实现&#xff1…...

uniapp安卓通过绝对路径获取文件

uniapp安卓通过绝对路径获取文件 在uniapp中&#xff0c;如果你想要访问安卓设备上的文件&#xff0c;你需要使用uniapp提供的plus.io API。这个API允许你在应用内访问设备的文件系统。 以下是一个示例代码&#xff0c;展示了如何使用plus.io API来获取文件&#xff1a; fun…...

Known框架实战演练——进销存业务单据

本文介绍如何实现进销存管理系统的业务单据模块&#xff0c;业务单据模块包括采购进货单、采购退货单、销售出货单、销售退货单4个菜单页面。由于进销单据字段大同小异&#xff0c;因此设计共用一个页面组件类。 项目代码&#xff1a;JxcLite开源地址&#xff1a; https://git…...

解决npm依赖树冲突的方法以及npm ERR! code ERESOLVE错误的解决方案

一、问题描述 在使用ng new myapp --skip-install 构建Angular 项目后&#xff0c;尝试用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 整合定时批量任务

​ 博客主页: 南来_北往 系列专栏&#xff1a;Spring Boot实战 前言 最近一周&#xff0c;被借调到其他部门&#xff0c;赶一个紧急需求&#xff0c;需求内容如下&#xff1a; PC网页触发一条设备升级记录&#xff08;下图&#xff09;&#xff0c;后台要定时批量设备更…...

C++STL简介(二)

目录 1.模拟实现string 1.string基本属性和大体框架 2.基本函数 2.1size&#xff08;&#xff09; 2.2 [] 2.3 begin() 和end() 2.4capacity&#xff08;&#xff09; 2.5 reserve 2.6push_back 2.7 append 2.8 2.9insert 2.10find 2.11substr 2.12 2.12 < …...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

实战三:开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...