React原理基础相关面试

拼搏现实的明天。 2022-11-28 13:33 156阅读 0赞

## 1. 函数式编程 ##

一种编程范式, 概念较多  
纯函数 ( 返回新值是纯函数最重要的特点之一 )  
不可变值 ( setState和redux中的action的时候都是使用不可变值 )

## 2. vdom和diff算法 ##

**h函数**  
**vnode数据结构**:  
![vnode][]  
**patch函数**

**Diff算法**  
只比较同一层级, 不跨级比较. tag不同, 直接删掉重建, 不再深度比较  
tag和key, 两者都相同, 就认为是相同节点, 不再深度比较

**Vue2.x Vue3.0 React**三者实现vdom细节都不同, 但核心概念和思路一样

## 3. JSX本质 ##

JSX等同于Vue模板  
Vue模板不是html  
JSX不是JS

**回顾Vue模板编译**  
render函数返回vnode,通过patch对vnode进行处理

**JSX编译**  
react通过Babel编译, 而Vue是自己模板编译  
React.createElement(‘tag’, null, child1, child2, child3) , 执行这代码返回vnode

> React.createElement(‘tag’, null, child1, child2, child3) 即h函数, 返回vnode, 然后通过patch渲染  
> 第一个参数, 可能是html tag, 也可能是组件  
> 如何区分是tag还是组件: 组件名首字母是大写

## 4. 合成事件 ##

nativeEvent.target指向当前元素, 当前元素触发  
nativeEvent.currentTarget 指向document

> 所有事件都挂载到document上  
> event事件不是原生的, 是SyntheticEvent合成事件对象  
> 和Vue事件不同, 和DOM事件也不同  
> react自己重新实现了event机制, 但是没有回避原生事件, 而是集合在nativeEvent原生事件对象中

![事件机制][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ4NDQ2NTQy_size_16_color_FFFFFF_t_70_pic_center]  
比如现在事件挂载完毕, 挂载完毕之后触发事件div, 因为dom事件会冒泡, 最终冒泡到document上, 因为react事件全部绑定到document上, document会生成一个统一的event也就是合成事件对象, 在合成事件这一层会派发事件, 比如可以通过target知道哪个元素触发的事件, 所以通过判断target知道了元素所在位置和绑定关系,就会知道所有绑定了该事件的元素, 然后把合成事件的event传递进 来去执行该函数

**为什么要合成事件机制 ?**  
更好的兼容性和跨平台

> 自己实现一套机制, 能够一定程度摆脱DOM机制束缚, 跨平台重写的成本减少

挂载到document, 减少内存消耗, 避免频繁解绑

> 比如, 瀑布流和文件加载列表如何解决里面每一个事件, 在父元素或最外层上监听事件, 比如document上

方便逻辑和事件的统一管理(如事务机制)

## 5. setState batchUpdate ##

有时异步(普通时), 有时同步(setTimeout, 自己定义的DOM事件)  
有时合并(对象形式), 有时不合并(函数形式)

**setState主流程**  
![setstate流程][setstate]  
![左右][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ4NDQ2NTQy_size_16_color_FFFFFF_t_70_pic_center 1]  
普通情况走左边分支, 异步更新, 在batch update机制中.  
settimeout情况走右边分支, 同步, 不在batch update机制中  
在ListDemo组件(不管异步还是同步)中, 函数在执行开始时, react自动设置一个变量 isbatchingUpdates = true, 函数执行完时, 在外面赋值成false, 结束batchingupdate机制. 区别在于左边在执行函数时, isbatchingUpdates是true, 而右边是false. 因此判断是否处于isbatchingUpdates机制中, 就看他的值为true还是false

**哪些能命中isbatchingUpdates机制？**  
React可以“管理”的入口  
生命周期（和它调用的函数）  
React中注册事件（和它调用的函数）

**哪些不能命中isbatchingUpdates机制？**  
React可以“管理不到”的入口  
setTImeout （和它调用的函数）  
自定义事件（和它调用的函数）

**transaction事务机制**  
![transaction][]

## 6. React组件渲染和更新过程 ##

1.  **JSX如何渲染为页面**  
    JSX本质即createElement函数  
    执行生成vnode  
    patch（elem，vnode）和patch（vnode，newVnode）

--------------------

1.  **回顾Vue组件渲染和更新过程**  
    ![Vue组件渲染][Vue]  
    **渲染过程：**  
    模板渲染出一个render函数， 执行render函数就会到vDom中渲染出Dom结构。 这个渲染过程中同时会touch一些data， data的getter会被touch到，被touch到的data会被收集到watcher中观察  
    **更新过程：**  
    渲染中触发setter， setter会找watcher中收集的属性， 触发re-render

--------------------

1.  React组件渲染过程  
    props state然后render（）解析jsx结构生成vnode， 再去patch（elem，vnode）
2.  React组件更新过程  
    先setState（newstate）生成dirtyComponents（可能有子组件）然后遍历所有组件去render（）根据jsx结构生成newVnode，然后patch

## 7. React组件渲染和更新过程 - fiber ##

1.  上述更新patch拆分两个阶段  
    reconciliation阶段-- 执行diff算法， 纯js计算  
    commit阶段-- 将diff结果渲染DOM  
    **为什么要分两个阶段？**  
    如果不分可能会有性能问题。 因为JS单线程， 且和DOM渲染共用一个线程，  
    当组件足够复杂时， 组件更新计算和渲染压力大， 同时有其他DOM需求比如动画， 鼠标拖拽等，会卡顿。  
    **解决方案**：  
    fiber:  
    将reconciliation阶段进行任务拆分(commit无法拆分, 因为DOM渲染需要浏览器支持), DOM如果需要渲染时暂停reconciliation(因为被切割成很多的任务片段), 在空闲时恢复任务执行.  
    通过window.requestIdleCallback知道DOM何时渲染

## 8. 总结 ##

函数式编程: 纯函数 不可变值  
vdom和diff  
JSX本质 : JSX即createElement函数, 执行生成vnode, 通过patch方法把jsx渲染到页面  
合成事件: 所有事件都挂载到document上, event不是原生的, 是合成对象  
setState batchUpdate 的表现(重要)和主流程  
组件渲染和更新过程: 更新的两个阶段reconciliation和commit, fiber

[vnode]: /images/20221124/21dcd3e1882c4cb08ba7d8558037f9c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ4NDQ2NTQy_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/0be8a9b6c97f40349f79ce181e55cbdd.png
[setstate]: /images/20221124/c6731d52bad44309ae8a3181e8acda05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ4NDQ2NTQy_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/0a0e7bdd01364d249870759aaf2b93ec.png
[transaction]: /images/20221124/628b7a186b4947b9a4be95d1ace3e764.png
[Vue]: /images/20221124/b251c663ae104595968b65db08d6b4d6.png