react篇
前言
网上的React面试题文章有非常多,但很多题都过时了。
有的文章只包含了react相关题目,但是真正面试不只考react问题,js,css,http,es6都会涉及的到。
此片文章,针对以上几点,整理了一些时下高频的react前端面试题,并且做出相应的解析。
其他篇
正文
1.什么是JSX?
JSX是一种Javascript的语法扩展,可以很好的描述UI的架构。是React.createElement的语法糖。浏览器不能直接解析JSX文件,需要通过Bable进行转译成js。
2.讲一下虚拟Dom?
虚拟Dom:虚拟Dom是描述真实Dom的js对象。
特点:
(1)处理了浏览器兼容性问题,避免用户操作真实DOM,不容易出错。
(2)内容经过了XSS处理,可以防范XSS攻击。
(3)可以实现跨平台开发。
(4)在更新的时候,比较两棵虚拟DOM树的差异,差异化更新。
延伸题:
什么是diff算法?
diff算法,就是用来找出两段文本之间的差异的一种算法。
vdom为什么用diff算法?
由于DOM操作是非常昂贵的,就可以通过diff算法来减少DOM操作。
vdom比真实dom快?
回答:不一定。
在比较性能的时候,要分清楚初始渲染、小量数据更新、大量数据更新这些不同的场合。
无效、无意义的diff是需要浪费性能的,因此有些场景不如直接操作原生DOM性能好。
3.类组件和函数组件之间的区别是什么?
相同点:它们都可以接收属性并且返回React元素。
不同点:
(1)类组件需要创建实例,是基于面向对象的方式编程,函数组件不需要创建实例,接收输入,返回输出,是基于函数编程的思想。
(2)类组件需要创建并且保持实例,会占用一定的内存,函数组件不需要创建实例,可以节约内存占用。
(3)类组件有完整的生命周期,函数组件没有生命周期(现在通过useEffect实现类似生命周期的功能)
(4)类组件通过shouldComponent和pureComponent跳过更新,而函数组件可以通过React.memo跳过更新。
(5)类组件服用逻辑一般用HOC,函数组件可以自定义Hook。
延伸题:
源码如何区分函数组件与类组件?
通过Component.prototype.isReactComponent属性来判断。
4.hooks出现的意义?
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
Hooks 优势:
(1)函数组件无 this 问题
(2)自定义 Hook 方便复用状态逻辑
(3)副作用的关注点分离
5.了解React Fiber吗?
React Fiber初衷是改变js在浏览器的主线程上长时间执行,会阻塞其他操作,影响用户体验。
Fiber的关键特性:
(1)增量渲染(把渲染任务拆分成块,匀到多帧)
(2)更新时能够暂停,终止,复用渲染任务
(3)给不同类型的更新赋予优先级
(4)并发方面新的基础能力
协调器reconciler :
Fiber前的 Reconciler 被命名为Stack Reconciler 运作的过程无法中断(持续占用主线程),这样主线程上的布局、动画等周期性任务以及交互响应就无法立即得到处理,影响体验。
而新的Reconciler 命名为Fiber Reconciler 每执行一段时间,都会将控制权交回给浏览器&#