React常见面试题(2024最新版)

创建项目

npx create-react-app my-app

启动项目

npm start

目录结构

目录/文件名描述
README.md项目的自述文件
node_modules/项目依赖包存放目录
package.json包管理配置文件,记录项目信息和依赖
package-lock.json锁定依赖版本,确保跨环境一致性
public/公共资源目录
public/index.html主 HTML 文件,React 应用将被引入到这里
public/favicon.ico网站图标
public/manifest.jsonPWA 配置文件
src/源代码目录
src/components通用功能组件
src/pages页面组件
src/router路由文件
src/storeRedux 状态管理相关的代码
src/store/modulesRedux 各个子模块
src/store/index.jsRedux 组装各个子模块的文件
src/App.cssApp组件的样式文件
src/App.js应用的主要组件
src/App.test.jsApp组件的测试文件
src/index.css入口样式文件
src/index.js应用的入口文件
src/logo.svg示例 logo 文件
src/reportWebVitals.jsWeb Vitals 性能监测报告工具
src/setupTests.js测试环境设置文件
.gitignoreGit 版本控制系统忽略文件规则
.eslintrc.jsonESLint 配置文件,用于代码风格检查
.gitattributesGit 属性配置文件
yarn.lock(如果使用 Yarn)锁定依赖版本的文件

Virtual DOM 是什么?

虚拟 DOM 是以 JS 对象的形式模拟真实 DOM。虚拟 DOM 并不直接与用户交互,而是作为实际 DOM 的抽象和中间层存在。通过 Diff 算法对比新旧虚拟 DOM 树的差异,精确地找出哪些部分发生了变化,从而对真实 DOM 中变动的部分进行最小化更新,而非重新渲染整个页面。

什么是 Diff 算法?它是如何进行比较的?

一种用于确定并计算两个对象(通常是虚拟 DOM 树)差异的算法。其核心目的是为了高效地更新用户界面(UI)。React 的 Diff 算法专注于找出新旧虚拟 DOM 树之间的最小变化集,以便尽可能快速且高效地将这些变化应用到实际的 DOM 上,以此达到 UI 的快速更新,同时减少不必要的重渲染,提升性能。

  • 分层比较(Tree Diff):首先对树进行分层遍历,而不是一次性比较整个树的所有节点。这意味着 React 只会对位于同一层级的节点进行比较,而不会跨层级直接比较。这样可以显著减少比较的复杂性。
  • 同层节点遍历:在每一层,React 从左到右遍历子节点。对于每个节点,它检查新旧节点的类型是否相同。如果类型不同,React 认为这是一个重大变更,会直接替换整个子树;如果类型相同,则继续比较属性和子节点。
  • 元素类型与属性比较:当节点类型相同时,React 会检查属性是否有变化。如果有属性变更,React 会尽可能地就地更新这些属性,而不是替换整个元素。
  • 列表比较与 Key 的作用:对于子节点是列表的情况,React 依赖于列表中每个元素的唯一 key 属性来优化比较。通过 key,React 能快速确定哪些元素是新增的、删除的或是位置发生了变化,从而减少不必要的创建和销毁操作。没有 key 或错误使用 key 会导致 React 采取较为低效的比较策略。
  • Component Diff:对于组件,React 会比较组件的类型。如果类型相同,它可能会复用已存在的组件实例并仅更新 props。如果类型不同,React 将卸载旧组件并创建新组件。

React 中 keys 的作用是什么?

key 是 React 中用于追踪哪些列表中元素被修改、删除或者被添加的辅助标识。在 Diff 算法中,key 用来判断该元素节点是被移动过来的还是新创建的元素,减少不必要的元素重复渲染。

State 和 Props 的区别是什么?

相同点
Props 和 State 是普通的 JS 对象,它们都是用来保存信息的。

不同点
State(状态):是组件自己管理数据、控制自己的状态,可以修改。
Props(属性): 是外部传入的数据参数,不可修改。

注意点:
没有 State 的叫做无状态组件,有 State 的叫做有状态组件。
多用 Props,少用 State,也就是多写无状态组件。

setState 是同步的还是异步的?

setState 通常是异步的,React 会将多个 setState 函数合并成一个队列,然后批量更新组件。

如果改变状态的代码处于某个 HTML 元素的事件中,则其是异步的,都则是同步。

什么是受控组件和非受控组件?

非受控组件:表单元素的值不由 React 直接管理,而是直接从 DOM 中读取,常使用 Ref 属性来访问 DOM 元素。
受控组件:通过 setState 将表单元素的值维护到了 state 中,需要时再从 state 中取出,这里的数据就受到了 state 的控制,称为受控组件。

什么是展示组件和容器组件?

展示组件(Presentational Components):通常是无状态的,接收来自容器组件的 Props。主要负责 UI 的呈现,即组件的外观和布局。它们专注于如何将数据渲染成用户可见的界面。
容器组件(Container Components):通常是有状态(state)的。负责管理数据和业务逻辑,决定组件如何运作。它们与数据源交互,如 API 调用、Redux store 等,并将数据传递给展示组件。

什么是高阶组件?

高阶组件(Higher-Order Components 简称 HOC)是一种函数,接受一个组件作为参数并返回一个新的组件。高阶组件内部可以对传入的组件进行包装,添加额外的属性(props)、状态管理、生命周期方法或者其他逻辑。用于实现组件的复用、逻辑的抽象和代码的组合。

React Hooks 是什么?

React Hooks 是 React 16.8 版本引入的一个特性,它允许你在不编写 class 组件的情况下使用 state 和其他 React 特性。Hooks 让函数组件也能拥有状态管理和生命周期方法等功能,从而简化组件结构,提高代码的可读性和可维护性。

useRef()和 React.createRef()的区别?

useRef():在每一次组件更新,再次执行 useRef 方法的时候,不会创建新的 ref 对象,获取到的还是第一次创建的 ref 对象(函数组件推荐使用)。
createRef():在每一次组件更新的时候,会创建一个新的 ref 对象,比较浪费性能(类组件推荐使用)。

常见或常用的 Hooks 有哪些?

useState():在函数组件中使用状态,修改状态值,更新视图。
useRef():在函数组件中获取 DOM 元素。
useEffect():在函数组件中执行副作用操作,如数据获取、订阅、定时器等。简单来说就是模拟类组件的生命周期。在第一个参数(回调函数)中,再 return 一个函数,可以清除副作用(比如:清除定时器)。
useMemo():在函数组件重新渲染时缓存计算结果,避免重复计算。类似于 Vue 的 computed。
useReducer():用来操作复杂的组件状态逻辑。参数分别是 reducer 函数和初始状态,根据 action.type 执行对行类型操作。
useCallback():在函数组件中缓存函数,避免函数每次渲染都创建新的函数。简单来说当父组件重新渲染的时候因为传递了函数给子组件,子组件也会跟着渲染。当使用 useCallback 包裹函数后,可以避免每次重新渲染都创建新的函数。
useContext():用于多层组件实现数据共享,无需显式地传递 props。
有待补充

React.memo()是什么?

React.memo() 是一个高阶组件,用于优化组件的渲染。当组件的 props 没有变化时,React.memo() 会阻止组件的渲染。
注意:调用 React.memo() 会返回一个新的组件。

import { useState, memo } from "react";
// React默认渲染机制,只要父组件更新,子组件也会重新渲染
// 父组件点击按钮改变名字时,子组件也会跟着修改,但其实子组件并没有改变
// 这个时候子组件没必要重新渲染
const MemoSon = memo(function Son(props) {console.log("Son", props);return (<div><h3>Son</h3></div>);
});function App() {const [count, setCount] = useState(0);const [name, setName] = useState("zhangsan");return (<div><h1>App</h1><MemoSon count={count} /><button onClick={() => setCount(count +

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

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

相关文章

aspice认证是什么?

ASPICE认证是汽车软件过程改进及能力评定模型框架&#xff0c;用于评价软件开发团队的研发能力水平。 &#xff08;要明确的是&#xff1a;在ASPICE行业中专业来说&#xff0c;ASPICE项目是没有认证&#xff0c;而只有评估。不过&#xff0c;为了方便沟通&#xff0c;人们常将…

PHP框架之Yii框架

Yii框架详细说明 Yii框架是一个基于组件的高性能PHP框架&#xff0c;用于开发大型Web应用。Yii框架由薛强创立&#xff0c;自2008年1月1日开始开发&#xff0c;至今已成为PHP开发领域的佼佼者之一。Yii框架以其高效、安全、灵活和可扩展的特性&#xff0c;赢得了众多开发者的青…

YOLOv10改进 | 注意力篇 | YOLOv10引入iRMB

1. iRMB介绍 1.1 摘要:本文重点关注开发现代、高效、轻量级的模型来进行密集预测,同时权衡参数、FLOP 和性能。 反向残差块(IRB)作为轻量级 CNN 的基础设施,但基于注意力的研究尚未认识到对应的部分。 这项工作从统一的角度重新思考高效IRB和Transformer有效组件的轻量级…

leecode代码模板

二分算法&#xff1a; 34. 在排序数组中查找元素的第一个和最后一个位置给你一个按照非递减顺序排列的整数数组 nums&#xff0c;和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。如果数组中不存在目标值 target&#xff0c;返回 [-1, -1]。你必须设计…

渗透测试基础(四) MS08-067 漏洞攻击

1. 漏洞介绍 漏洞描述 Microsoft Windows Server服务RPC请求缓冲区溢出漏洞Windows的Server服务在处理特质RPC请求时存在缓冲区溢出漏洞&#xff0c;远程攻击者可以通过发送恶意的RPC请求触发这个溢出&#xff0c;导致完全入侵用户系统&#xff0c;以SYSTEM权限执行任意指令。…

太湖远大毛利率下滑:研发费用率远低同行,募投项目合理性疑点重重

《港湾商业观察》黄懿 6月20日&#xff0c;浙江太湖远大新材料股份有限公司&#xff08;以下简称“太湖远大”&#xff0c;873743.NQ&#xff09;即将迎来过会。 2023年11月30日&#xff0c;太湖远大所提交的上市申请材料正式获北交所受理&#xff0c;保荐机构为招商证券&…

功能测试 之 单模块测试----添加会员

1.需求分析 点击【添加会员】按钮后&#xff0c;页面跳转至添加会员详细页面。 说明&#xff1a; 会员昵称&#xff1a;必填&#xff0c;长度在20个字符&#xff08;除去空格&#xff09;以内&#xff0c;&#xff08;会员昵称&#xff09;可以重复&#xff1b;登录密码&#x…

关于IntelliJ IDEA 2024.1版本更新的问题

希望文章能给到你启发和灵感&#xff5e; 感谢支持和关注&#xff5e; 阅读指南 序幕一、基础环境说明1.1 硬件环境1.2 软件环境 二、起因三、解决四、总结 序幕 近期&#xff0c;IntelliJ IDEA 推出了全新2024版本&#xff0c;相信很多编程的爱好者或者刚接触编程的小伙伴都会…

gorm简介

【1】ORM: 即Object-Relational Mapping,它的作用是在关系型数据库和对象之间作一个映射&#xff0c;这样我们在具体的操作数据库的时候&#xff0c;就不需要再去和复杂的SQL语句打交道&#xff0c;只要像平时操作对象一样操作它们就可以了。 【2】GORM gorm是go语言的一个orm…

Linux之gzip压缩和解压缩

Linux之gzip压缩和解压缩 gzip命令是压缩和解压缩命令&#xff0c;用于操作".gz"格式的的文件。gzip对文本文件的压缩率有60%~70%。 命令格式 注意&#xff0c;选项的顺序不可变tar -zcvf 打包压缩文件名.tar.gz 被压缩的文件/目录 --压缩文件 tar -zxvf 打包文…

SpringBoot的冬奥会科普平台 LW +PPT+源码

3 平台分析 3.1 平台可行性分析 3.1.1 经济可行性 由于本平台是作为毕业设计平台&#xff0c;且平台本身存在一些技术层面的缺陷&#xff0c;并不能直接用于商业用途&#xff0c;只想要通过该平台的开发提高自身学术水平&#xff0c;不需要特定服务器等额外花费。所有创造及工…

【每日刷题】Day70

【每日刷题】Day70 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 922. 按奇偶排序数组 II - 力扣&#xff08;LeetCode&#xff09; 2. 905. 按奇偶排序数组 - 力扣&…

CSS--超出就显示滚动条并设置滚动条的样式

原文网址&#xff1a;CSS--超出就显示滚动条并设置滚动条的样式_IT利刃出鞘的博客-CSDN博客 简介 本文介绍HTML如何超出就显示滚动条并设置滚动条的样式。 超出就显示滚动条 方法如下&#xff1a; 第一步&#xff1a;设置父容器的高度&#xff08;height或者max-height&am…

Bigtable的数据结构

Bigtable的数据结构 1. 表&#xff08;Table&#xff09; 基本单位&#xff1a;Bigtable存储数据的基本单位是表&#xff0c;一个表由多行组成。无限制&#xff1a;表可以非常大&#xff0c;理论上没有大小限制。 2. 行&#xff08;Row&#xff09; 行键&#xff1a;每一行…

GeoServer安装启动

GeoServer 使用 servlet 容器&#xff08;例如Apache Tomcat&#xff09;打包为独立的 Java web 应用程序。以下说明专门针对 Tomcat。它可能不适用于其他容器应用程序。 在 Tomcat 上安装 导航到GeoServer 下载页面。从“已存档”中&#xff0c;选择最新的 2.18.x 版本的 GeoS…

Python12 列表推导式

1.什么是列表推导式 Python的列表推导式&#xff08;list comprehension&#xff09;是一种简洁的构建列表&#xff08;list&#xff09;的方法&#xff0c;它可以从一个现有的列表中根据某种指定的规则快速创建一个新列表。这种方法不仅代码更加简洁&#xff0c;执行效率也很…

iOS 17.6养老版发布,旧机必升?

iOS 17.6 的第一个开发者测试版已发布&#xff0c;另外还发布了macOS 14.6、watchOS 10.6、iPadOS 17.6 等。 苹果iOS系统更新一直是科技爱好者和用户关注的焦点&#xff0c;尤其是在iOS18的测试阶段&#xff0c;其吸引力尤为显著。尽管苹果同时推送了iOS17.6 Beta1&#xff0c…

linux 如何判断磁盘是HDD还是SSD

本文主要是判断磁盘是 HDD 还是不上 HDD&#xff0c;只用于直通盘的判断&#xff0c;raid盘不在内 方法一、 使用lsblk 命令判断 # 仅查看物理盘的名称、空间大小、SSD(0)? HDD(1)?, 设备供应商以及状态。 [integraTorsctyunos ~]$ lsblk -d -o NAME,SIZE,ROTA,VENDOR,STATE…

kimi+的+能为论文写作+出什么?我帮你试过了!

学境思源&#xff0c;一键生成论文初稿&#xff1a; AcademicIdeas - 学境思源AI论文写作 Kimi是月之暗面科技有限公司开发的个性化智能助手功能。相比kimi&#xff0c;Kimi能够提供个性化定制服务&#xff0c;根据用户特定需求提供更专业深入的辅助&#xff0c;实现一对一的智…

多线程(总结黑马程序员)

一、什么是线程&#xff1f; 是一个程序内部的一条执行流程 多线程是什么&#xff1f; 多条线程由CPU负责调度执行 多线程的创建方式一&#xff1a;继承Thread类 //1.继承Thread类 public class MyThread extends Thread {//2.必须重写run方法Overridepublic void run() {…