前端面试题——React篇


前言

准备了一些高频面试题,有需要的小伙伴可以收藏,需要的时候看看,也会持续更新。


1.useEffect是异步还是同步

useEffect的执行是异步的,这主要是为了确保它不会阻塞浏览器的绘制过程,从而保持用户界面的响应性。

为何是异步

1、避免阻塞浏览器绘制:
如果 useEffect 同步执行,那么在组件渲染过程中,所有的副作用逻辑(比如数据获取、DOM 操作、订阅等)都必须执行完毕,浏览器才能继续绘制。这会导致用户界面在副作用执行期间停顿,影响用户体验。

2、保持数据一致性:
React 的渲染过程是异步和批处理的。在渲染过程中,多个状态更新可能被批处理。如果 useEffect 是同步执行的,可能会导致在渲染过程中状态的不一致,因为副作用可能依赖于最新的渲染结果。异步执行 useEffect 确保了在所有 DOM 更新完成后再运行副作用逻辑,从而保证数据的一致性。

3、类比于生命周期:
在类组件中,副作用通常在 componentDidMountcomponentDidUpdate 生命周期方法中执行。React 将这些方法的执行也设计为异步,以便优化性能和用户体验。useEffect 是函数组件中的等价 Hook,因此也遵循相同的异步设计原则。

4、更好的性能优化:
React 可以通过异步执行副作用来更好地管理性能。比如,React 可以在必要时跳过不需要的副作用,或在空闲时间(通过 requestIdleCallback)执行一些较低优先级的副作用,从而提高应用的整体性能。

如何拿到最新的数据

1、使用useEffect依赖项:
useEffect 的第二个参数是一个数组,包含所有影响副作用执行的状态或变量。当这些依赖项发生变化时,useEffect 会重新执行。确保将数据作为依赖项传递给 useEffect,这样可以保证在数据更新后,副作用会重新执行,从而拿到最新的数据。

2、使用 async/await:
如果你在 useEffect 中使用了异步函数(比如 fetch),你可以使用 async/await 来确保在数据完全获取后再更新状态。

3、使用setTimeout:使用setTimeout时,将延迟时间设置为0或者省略,可拿到需要的最新数据。

  • 执行机制setTimeoutuseEffect在一起有多余的感觉,因为useEffect本身就是异步,而setTimeout也是异步的。即使没有 setTimeout,React 也会在组件渲染完成后立即执行,所以,setTimeout并不会改变其执行时机。
  • 性能考虑:虽然将时间设置为 0 的 setTimeout 通常被用来将代码推迟到下一个事件循环中执行,但在这里,它只是增加了额外的无谓开销,没有提供任何实际的优势。这可能会对性能产生微小的负面影响。

2.微任务和宏任务

概念

1、微任务(microtask):
微任务是指在当前任务执行完毕后立即执行的任务。Promise回调函数、async/await(返回的也是一个promise)、process.nextTick、等都是微任务的例子。在React中,更新状态和执行副作用(如生命周期方法、钩子函数、effect hook等)通常被视为微任务。这意味着,当React组件的状态更新时,React会将相应的更新计划为微任务,以确保它们在当前任务执行结束后立即执行。

2、宏任务(macrotask):
宏任务是指需要在事件循环的下一个迭代中执行的任务。定时器(setTimeout、setInterval)、I/O 操作、UI 渲染等通常被视为宏任务。在React中,调度新的组件渲染、处理用户输入等也被认为是宏任务。

优点

在React中,通过将任务分解为微任务和宏任务,可以实现异步更新优化性能。例如,React可以利用微任务将多个状态更新合并成一个,从而减少渲染次数,提高性能。同时,宏任务的使用也确保了React能够在用户交互等事件之后及时更新UI,提供良好的用户体验。

3.事件循环(Event Loop)

概念

事件循环(Event Loop)是Javascript运行时环境的一部分,它负责管理代码的执行顺序,简单来说就是Javascript的一种运行机制,解决浏览器的单线程问题。
Javascript单线程任务从时间上分为同步任务和异步任务,而异步任务又分为宏任务(macrotask)和微任务(microtask)。

执行机制

  1. 执行全局同步代码,将其中的函数调用推入调用栈中。
  2. 当调用栈为空时,事件循环开始执行微任务队列中的任务,直到微任务队列为空。
  3. 从任务队列中取出一个任务,并将其推入调用栈中执行。
  4. 重复上述步骤,直到任务队列和微任务队列都为空。

4.React性能优化手段

  1. 避免不必要的渲染合理使用shouldComponentUpdateReact.PureComponent,使用 shouldComponentUpdate 来控制组件是否需要重新渲染。React.PureComponent 自动实现了 shouldComponentUpdate,浅比较 props 和 state,函数组件可使用React.memo
  2. 使用合适的数据结构和状态管理:使用不可变数据结构(如 Immutable.js)有助于高效地进行数据比较和变更检测;适当地提升状态,避免在层级过深的组件树中传递大量数据。使用 React.Context 来避免深层级的 props 传递。
  3. 避免匿名函数和对象:在渲染方法中避免定义匿名函数和对象,因为每次渲染都会生成新的引用,导致子组件的重新渲染。
  4. 代码分割和懒加载:使用 React.lazyReact.Suspense 进行代码分割和组件懒加载,减少初始加载时间。
  5. 使用虚拟化列表:对于长列表,使用虚拟化技术(如 react-windowreact-virtualized)来只渲染视口中的项目,避免渲染大量的 DOM 节点。
  6. 合理使用 useCallbackuseMemo:对于函数和复杂计算结果,使用 useCallbackuseMemo 来避免不必要的重新创建。
  7. 列表项使用 key 属性key 属性帮助 React 高效地进行 DOM diff 算法,从而减少不必要的 DOM 操作,当列表发生变化时,React 可以使用 key 来确定哪些元素需要更新、插入或删除。
  8. 使用生产模式:确保在生产环境中使用 React 的生产版本。开发版本包含额外的警告和检查,性能较低,生产版本会进行代码压缩和性能优化。

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

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

相关文章

基于RandLA-Net深度学习模型的激光点云语义分割

一、场景要素语义分割部分的文献阅读笔记 RandLA-Net是一种高效、轻量级的神经网络,其可直接逐点推理大规模点云的语义标签。RandLA-Net基于随机点采样获得了显著的计算和内存效率,并采用新的局部特征聚合模块有效地保留了几何细节,弥补了随机…

SpringBoot之自动装配原理DataSourceAutoConfiguration注解剖析

自动装配候选类满足候选bean流程如下: 解析Conditional & Conditional 引申出的相关注解【ConditionalOnClass、ConditionalOnMissingBean】判断当前自动装配类是否需要跳过skip作为候选bean的流程。候选类存在Component注解则加载其全部的内部类,当…

React@16.x(30)useImperativeHandle

目录 1&#xff0c;介绍2&#xff0c;使用 1&#xff0c;介绍 在介绍 ref 时提到&#xff0c;ref 不能作用于函数组件&#xff0c;所以有了 ref 转发。 举例&#xff1a; function Child(props, ref) {return <h1 ref{ref}>child</h1>; }const ChildWrap React…

最新下载:Folx【软件附加安装教程】

​Folx Pro是一款适合Mac的专业下载工具也是一款BT下载器&#xff0c;Folx中文版有一个支持Retina显示的现代界面&#xff0c;提供独特的系统排序、存储下载内容与预览下载文件&#xff0c;Folx中文官网提供Folx教程、激活码、下载。 Folx友好兼容浏览器&#xff1a;如果你在网…

Linux Ubuntu 24.04 C语言gcc编译过程详解

下面是Hello World程序源代码文件hello.c的内容&#xff0c;我们将以它为例来说明源文件到可执行文件的形成过程&#xff0c;主要分4步&#xff1a;预处理、汇编、机器码、链接。 #include <stdio.h> int main () {printf ( "hello, world \n " );return 0; }…

浅谈网络通信(3)

文章目录 一、TCP[!]1.1、TCP协议报文格式1.2、TCP十大机制1.2.1、确认应答机制1.2.2、超时重传机制1.2.3、连接管理机制1.2.3.1、三次握手[其流程至关重要&#xff0c;面试必考]1.2.3.2.1、那为啥要建立连接&#xff1f;&#xff1f;建立连接的意义是啥&#xff1f;&#xff1…

Jetson Linux 上安装ZMQ

1. 安装ZMQ 框架 apt-get install libzmq3-dev 2. 或者自己build ZMQ https://github.com/zeromq/libzmq.git 参考官网教程 3. 安装CPPZMQ CPPZMQ 是ZMQ 的友好的C封装&#xff0c;只需要一个zmq.hpp 头文件即可 git clone https://github.com/zeromq/cppzmq.git cd cppz…

Ubuntu安装部署

Ubuntu安装部署 一、Ubuntu概述1、Ubuntu介绍2、Ubuntu特点 二、Ubuntu和Centos的区别1、Centos2、Ubuntu3、Centos和Ubuntu区别 三、安装Ubuntu-Server1、Ubuntu官网2、创建新的机子3、创建名称以及虚拟机在磁盘上的位置4、Ubuntu初始化和安装 四、安装Ubuntu1、开始安装2、安…

SAP RFC 输入一张表(C# 使用 SapNwRfc 二)

SapNwRfc中的配置参数&#xff0c;记录日志关闭 Trace0&#xff0c;可以得到很好的性能。 有网友在问&#xff0c;SAP RFC返回多张表&#xff08;C# 使用 SapNwRfc 一&#xff09;中如何输入一张表的数据&#xff0c;正好博主也遇到了这个场景&#xff0c;今天做了一个DEMO&…

python显示神经网络训练时的1batch数据

python显示神经网络训练时的1batch数据 在Python中显示神经网络训练时的1个batch数据可以通过以下几个步骤实现&#xff1a; 加载数据集&#xff1a;首先加载你的训练数据集&#xff0c;通常是使用PyTorch的DataLoader。 迭代数据集&#xff1a;获取DataLoader的一个迭代器&a…

4D毫米波雷达技术及发展

文章目录 前言一、4D毫米波雷达是什么&#xff1f;二、毫米波雷达是什么&#xff1f;毫米波雷达的基本原理多普勒效应 三、4D毫米波雷达的基本结构3D毫米波4D毫米波对比 前言 现阶段自动驾驶技术中&#xff0c;主要用到的传感器有摄像头、激光雷达和毫米波雷达。 摄像头的光谱…

系统架构师考点--计算机硬件

大家好。今天我总结一下计算机硬件的一些考点。 一、中央处理单元&#xff08;CPU&#xff09; 我们知道&#xff0c;计算机的基本硬件系统由运算器、控制器、存储器、输入设备和输出设备5大部件组成。其中运算器、控制器等部件被集成在一起统称为中央处理单元(Central Proce…

jdk17详细安装步骤

本文以Windows系统&#xff0c;JDK17版本作为示例&#xff0c;其他版本的操作步骤类似。 一、下载 进入官网后往下翻&#xff0c;找到JAVA17&#xff0c;然后点击Windows 点击下载。 二、安装 安装 JDK的安装是无脑安装&#xff0c;就是一路下一步下一步。。直到完成。默认安…

编译安装qemu-devel @FreeBSD

缘起 使用cbsd创建riscv jail的时候提示&#xff1a; you have no qemu-user, please install qemu-devle with BSD_USER and STATIC ops (emulators/qemu-devel) 使用pkg安装之后&#xff0c;创建的riscv jail启动报错&#xff1a; Starting jail: fbriscv, parallel timeo…

【OpenHarmony4.1 之 U-Boot 2024.07源码深度解析】006 - Makefile 编译脚本 逐行深度解析

【OpenHarmony4.1 之 U-Boot 2024.07源码深度解析】005 - u-boot 二进制文件分析 系列文章汇总:《【OpenHarmony4.1 之 U-Boot 源码深度解析】000 - 文章链接汇总》 本文链接:《【OpenHarmony4.1 之 U-Boot 2024.07源码深度解析】006 - Makefile 编译脚本 逐行深度解析》 本文…

Spring 循环依赖详解

Spring 循环依赖详解 1. 引言 在Spring框架中&#xff0c;依赖注入&#xff08;Dependency Injection, DI&#xff09;是其核心功能之一&#xff0c;它通过配置来管理对象的创建和它们之间的依赖关系。然而&#xff0c;在复杂的应用程序中&#xff0c;开发人员有时会遇到循环…

婚前隐瞒重大疾病,如何起诉

2022年5月&#xff0c;原告李先生经人介绍结识了王女士&#xff0c;因工作原因李先生长期在外地务工&#xff0c;平时交往过程中王女士行为表现也与常人无异。同年10月&#xff0c;二人登记结婚。婚后为了准备生育&#xff0c;王女士停止服药&#xff0c;结果在行为、表达、与人…

华为数通题库HCIP-821——最新最全(带答案解析)

单选1、下面是一台路由器的输出信息&#xff0c;关于这段信息描述正确的是 A目的网段1.1.1.0/24所携带的团体属性值是no—export表明该路由条目不能通告给任何BGP邻居 B目的网段5.1.1.0/24所携带的团体属性值是no—advertise表明该路由条目不能被通告给任何其他的BGP对等体 C…

大数据概论总结

三次信息化浪潮 : 信息技术的支撑 : 存储设备容量不断增加 CPU的处理能力不断提高 网络带宽不断增加 数据产生方式的变革促成大数据时代的来临 运营式系统阶段用户原创内容感知式系统阶段 大数据发展历程 : 分为三个阶段 : 大数据的概念 : 1 . 数据量大 : 根据IDC作出…