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.protot