react高频面试题（react篇）

前言

网上的React面试题文章有非常多，但很多题都过时了。

有的文章只包含了react相关题目，但是真正面试不只考react问题，js，css，http，es6都会涉及的到。

此片文章，针对以上几点，整理了一些时下高频的react前端面试题，并且做出相应的解析。

其他篇

react高频面试题（JavaScript篇）.

react高频面试题（css篇）.

react高频面试题（http&&浏览器篇）.

正文

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 每执行一段时间，都会将控制权交回给浏览器，可以分段执行。

Fiber Reconciler 在执行过程中，会分为 2 个阶段 ：

（1）render阶段，生成 Fiber 树，得出需要更新的节点信息。这一步是一个渐进的过程，可以被打断。

（2）commit阶段，将需要更新的节点一次过批量更新，这个过程不能被打断。

6