【React】React原理面试题集锦

简介: 本文集合一些React的原理面试题,方便读者以后面试查漏补缺。作者给出自认为可以让面试官满意的简易答案,如果想要了解更深刻,可以点击链接查看对应的详细博文。在此对链接中的博文作者非常感谢🙏。

本文集合一些React的原理面试题,方便读者以后面试查漏补缺。作者给出自认为可以让面试官满意的简易答案,如果想要了解更深刻,可以点击链接查看对应的详细博文。在此对链接中的博文作者非常感谢🙏

  1. React 的设计思想是什么?

参考链接: https://github.com/camsong/react-basic (这个写的很好,React创始人的角度写的翻译版)

最核心的思想应该是通过函数(Function)完成数据(Data)->视图(UI)的转换,简称UI=f(Data).在这个过程中,会有很多问题。如下:

  • 一个函数是无法将Data转成UI的,所以会出现函数套函数的情况,这跟积木一样,积木与积木之前会有组合(组件化思想),积木与积木之间也要有桥梁进行支撑,这相当于函数与函数之间的数据流,于是催生出了Redux等数据流管理框架。
  • 函数的计算是非常耗时的,所以要尽量减少不必要的消耗。这在Dom层面上的体现便是虚拟Dom,在函数上的体现便是缓存计算结果。
  1. 虚拟Dom到底是什么?

参考链接: https://juejin.cn/post/6844903870229905422

虚拟Dom更像是HtmlJson化,它虽然不是Dom树,但含有Dom树的全部信息。之所以采取虚拟Dom,应该是Json的数据结构更方便做Diff处理。

至于其中的Diff算法,比对新老虚拟Dom的变化,然后将变化的部分更新到视图上。对应到代码上,就是一个 diff 函数,返回一个 patches(补丁)

  1. React的生命周期有哪些?

参考链接: https://juejin.cn/post/6914112105964634119

主要分为3个生命周期:

  • 挂载: constructorgetDerivedStateFromPropsrendercomponentDidMount
  • 更新:getDerivedStateFromPropsshouldComponentUpdaterendercomponentDidUpdate
  • 卸载: componentWillUnmount
  1. React的事件系统原理?

参考链接:https://juejin.cn/post/6955636911214067720(好文推荐)

首先React里的事件,例如onClick等,并不是原生事件,而是由原生事件合成的React事件。例如click事件合成onClick事件。blur,changeinput等合成onChange事件等。所以这里有3个问题。

  • 事件是如何合成的?构建React合成事件和原始事件的对应关系以及如何处理事件的关系。
  • 事件是如何绑定的?触发了React合成事件,React将这些合成事件分解为若干个原始事件,然后冒泡执行(有些事件会在捕获阶段执行)。
  • 事件是如何触发的?会进入统一监听器dispatchEvent进行批量更新,然后插件合成事件源对象,得到事件执行队列,该队列用于模拟事件的捕获->事件源-> 事件冒泡的过程,最后执行事件队列,如果有阻止冒泡那么退出循环。
  1. JSX是什么,它和JS有什么区别?

参考链接:https://juejin.cn/post/7182382408807743548

JSX是react的语法糖,它允许在html中写JS,它不能被浏览器直接识别,需要通过webpack、babel之类的编译工具转换为JS执行

区别

JSX

JS

如何编译

通过babel编译转换

可直接编译

引入方式

使JS的拓展,可在html中直接写

需要通过scripts标签引入

  1. React的Fiber架构?

参考链接:https://juejin.cn/post/6993973502852202503

首先什么是Fiber: 在React16后提出的概念。FiberReact的一个执行单元,Fiber的主要思想是将UI渲染分成更小的任务,每一个小任务指的就是 Fiber的节点, 拆分的小任务会在浏览器的空闲时间被执行。每个任务单元执行完成后,React 都会检查是否还有空余时间,如果有就交换主线程的控制权,从而能让React平滑渲染UI,避免卡顿。

Fiber架构解决的问题:解决React在处理复杂UI时性能不佳的问题。

目录
相关文章
|
11天前
|
中间件 数据库连接 API
Python面试:FastAPI框架原理与实战
【4月更文挑战第18天】FastAPI是受欢迎的高性能Python Web框架,以其简洁的API设计、强大的类型提示和优秀的文档生成能力著称。本文将探讨FastAPI面试中的常见问题,包括路由、响应对象、Pydantic模型、数据库操作、中间件和错误处理。同时,还会指出一些易错点,如类型提示不准确、依赖注入误解,并提供实战代码示例。通过理解和实践FastAPI,可以在面试中展示出色的Web开发技能。
35 1
|
10天前
|
Android开发 移动开发 小程序
binder机制原理面试,安卓app开发教程
binder机制原理面试,安卓app开发教程
binder机制原理面试,安卓app开发教程
|
11天前
|
算法 网络协议 安全
HTTP 原理和面试题
HTTP 原理和面试题
|
6天前
|
机器学习/深度学习 编解码 算法
算法工程师面试问题总结 | YOLOv5面试考点原理全解析
本文给大家带来的百面算法工程师是深度学习目标检测YOLOv5面试总结,文章内总结了常见的提问问题,旨在为广大学子模拟出更贴合实际的面试问答场景。在这篇文章中,我们还将介绍一些常见的深度学习目标检测面试问题,并提供参考的回答及其理论基础,以帮助求职者更好地准备面试。通过对这些问题的理解和回答,求职者可以展现出自己的深度学习目标检测领域的专业知识、解决问题的能力以及对实际应用场景的理解。同时,这也是为了帮助求职者更好地应对深度学习目标检测岗位的面试挑战,提升面试的成功率和竞争力。
|
9天前
|
Android开发 异构计算 前端开发
Android显示原理,安卓自定义view面试
Android显示原理,安卓自定义view面试
|
10天前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
|
10天前
|
Java 数据库连接 Spring
K8S+Docker理论与实践深度集成java面试jvm原理
K8S+Docker理论与实践深度集成java面试jvm原理
|
10天前
|
设计模式 Android开发 Java
实战案例,精选Android面试真题集锦
实战案例,精选Android面试真题集锦
|
11天前
|
监控 Java 测试技术
【技术面试】服务器常问面试集锦
【技术面试】服务器常问面试集锦
11 2
|
11天前
|
缓存 监控 Java
干货 | 2024 年 Elasticsearch 常见面试题集锦
干货 | 2024 年 Elasticsearch 常见面试题集锦
55 0