【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时性能不佳的问题。

目录
打赏
0
0
0
0
105
分享
相关文章
大厂面试高频:Kafka 工作原理 ( 详细图解 )
本文详细解析了 Kafka 的核心架构和实现原理,消息中间件是亿级互联网架构的基石,大厂面试高频,非常重要,建议收藏。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
大厂面试高频:Kafka 工作原理 ( 详细图解 )
MySQL进阶突击系列(03) MySQL架构原理solo九魂17环连问 | 给大厂面试官的一封信
本文介绍了MySQL架构原理、存储引擎和索引的相关知识点,涵盖查询和更新SQL的执行过程、MySQL各组件的作用、存储引擎的类型及特性、索引的建立和使用原则,以及二叉树、平衡二叉树和B树的区别。通过这些内容,帮助读者深入了解MySQL的工作机制,提高数据库管理和优化能力。
美团面试:手机扫描PC二维码登录,底层原理和完整流程是什么?
45岁老架构师尼恩详细梳理了手机扫码登录的完整流程,帮助大家在面试中脱颖而出。该过程分为三个阶段:待扫描阶段、已扫描待确认阶段和已确认阶段。更多技术圣经系列PDF及详细内容,请关注【技术自由圈】获取。
硬核揭秘:线程与进程的底层原理,面试高分必备!
嘿,大家好!我是小米,29岁的技术爱好者。今天来聊聊线程和进程的区别。进程是操作系统中运行的程序实例,有独立内存空间;线程是进程内的最小执行单元,共享内存。创建进程开销大但更安全,线程轻量高效但易引发数据竞争。面试时可强调:进程是资源分配单位,线程是CPU调度单位。根据不同场景选择合适的并发模型,如高并发用线程池。希望这篇文章能帮你更好地理解并回答面试中的相关问题,祝你早日拿下心仪的offer!
41 6
最新版 | 深入剖析SpringBoot3源码——分析自动装配原理(面试常考)
自动装配是现在面试中常考的一道面试题。本文基于最新的 SpringBoot 3.3.3 版本的源码来分析自动装配的原理,并在文未说明了SpringBoot2和SpringBoot3的自动装配源码中区别,以及面试回答的拿分核心话术。
最新版 | 深入剖析SpringBoot3源码——分析自动装配原理(面试常考)
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?
本文详解自旋锁的概念、优缺点、使用场景及Java实现。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?
面试高频:Synchronized 原理,建议收藏备用 !
本文详解Synchronized原理,包括其作用、使用方式、底层实现及锁升级机制。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
面试高频:Synchronized 原理,建议收藏备用 !
美团面试:说说 G1垃圾回收 底层原理?说说你 JVM 调优的过程 ?
尼恩提示: G1垃圾回收 原理非常重要, 是面试的重点, 大家一定要好好掌握
美团面试:说说 G1垃圾回收 底层原理?说说你 JVM 调优的过程  ?
美团面试:binlog、redo log、undo log的底层原理是什么?它们分别实现ACID的哪个特性?
老架构师尼恩在其读者交流群中分享了关于 MySQL 中 redo log、undo log 和 binlog 的面试题及其答案。这些问题涵盖了事务的 ACID 特性、日志的一致性问题、SQL 语句的执行流程等。尼恩详细解释了这些日志的作用、所在架构层级、日志形式、缓存机制以及写文件方式等内容。他还提供了多个面试题的详细解答,帮助读者系统化地掌握这些知识点,提升面试表现。此外,尼恩还推荐了《尼恩Java面试宝典PDF》和其他技术圣经系列PDF,帮助读者进一步巩固知识,实现“offer自由”。
美团面试:binlog、redo log、undo log的底层原理是什么?它们分别实现ACID的哪个特性?
网易面试:说说 HTTPS 原理?HTTPS 如何保证 数据安全?
45岁老架构师尼恩在其读者交流群中分享了关于HTTP与HTTPS的深入解析,特别针对近期面试中常问的HTTPS相关问题进行了详细解答。文章首先回顾了HTTP的工作原理,指出了HTTP明文传输带来的三大风险:窃听、篡改和冒充。随后介绍了HTTPS如何通过结合非对称加密和对称加密来解决这些问题,确保数据传输的安全性。尼恩还详细解释了HTTPS的握手过程,包括如何通过CA数字证书验证服务器身份,防止中间人攻击。最后,尼恩强调了掌握这些核心技术的重要性,并推荐了自己的技术资料,帮助读者更好地准备面试,提高技术水平。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等