[TOC]
React面试宝典
react原理
说说react事件和原生事件的执行顺序
什么是fiber
那么如何理解react中的fiber呢，两个层面来解释：
- 从运行机制上来解释，fiber是一种流程让出机制，它能让react中的同步渲染进行中断，并将渲染的控制权让回浏览器，从而达到不阻塞浏览器渲染的目的。
- 从数据角度来解释，fiber能细化成一种数据结构，或者一个执行单元。
我们可以结合这两点来理解，react会在跑完一个执行单元后检测自己还剩多少时间（这个所剩时间下文会解释），如果还有时间就继续运行，反之就终止任务并记录任务，同时将控制权还给浏览器，直到下次浏览器自身工作做完，又有了空闲时间，便再将控制权交给react，以此反复。
参考链接 :
稀土掘金 — 【react】什么是fiber？fiber解决了什么问题？从源码角度深入了解fiber运行机制与diff执行 — 行星飞行。
虚拟dom
reactNode
const VitrualDom = {
type: 'span',
props: {
className: 'span'
},
children: [{
type: 'span',
props: {},
children: 'hello echo'
}]
}
虚拟DOM其实只是一个包含了标签类型type，属性props以及它包含子元素children的对象。
虚拟DOM的优缺点是什么
优势
- 简单：手动操作真实dom来实现页面的交互效果，既繁琐有容易出错，项目大了之后维护起来也不容易
- 性能：虚拟dom能够将都将多次真实dom更新合并成一次，可以减少重绘和重排
- 跨平台：react通过虚拟dom，实现的跨平台的能力，一套代码多端执行。
缺点
- 在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化
- 首次渲染大量DOM时，由于多了一层虚拟DOM的计算，速度比正常稍慢
参考链接 :
稀土掘金 — [react] 什么是虚拟dom？虚拟dom比操作原生dom要快吗？虚拟dom是如何转变成真实dom并渲染到页面的? — 行星飞行。
为什么 hooks 不能写在循环或者条件判断语句里？
因为 hooks 为了在函数组件中引入状态，维护了一个有序表。这样每次执行才能保证状态能对应上。比如第一次执行函数组件时，我们拿到状态 count（通过 setState，初始值为 0 ）和 isDone（通过 setState，初始值为 false），它们其实被保存到一个有序表中，它们的值会记录下来： [0, true] 。第二次执行函数组件，setState 会 按顺序 从这个表中拿出 0 和 true，赋值给 count 和 isDone。如果你把 hook 写到判断条件下，导致某个 setState 不执行了，这里我们假设 count 的 setState 因为判断条件没有执行，会发生什么？结果是 isDone 拿到了 0，发生了错位。函数本身不能保存状态，我们需要额外维护一个有序的表，在执行 setState 之类的 hook 时，将它们保存到这个表里。这要求每次函数组件的 hook 执行的位置相同，数量正确，否则会导致错位，不能拿到预期的状态值。
作者：前端西瓜哥 链接：https://www.zhihu.com/question/557740424/answer/2703394485 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
性能优化
React.memo() 和 useMemo() 的用法和区别
- React.memo() 是一个高阶组件，我们可以使用它来包装我们不想重新渲染的组件，除非其中的 props 发生变化
- useMemo() 是一个 React Hook，我们可以使用它在组件中包装函数。 我们可以使用它来确保该函数中的值仅在其依赖项之一发生变化时才重新计算