React原理基础相关面试

最新推荐文章于 2024-08-14 11:09:28 发布

桃子阿哥

最新推荐文章于 2024-08-14 11:09:28 发布

阅读量476

点赞数 1

分类专栏： javascript React 文章标签：前端面试 reactjs

本文链接：https://blog.csdn.net/m0_48446542/article/details/108065441

版权

javascript 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

React

14 篇文章 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原生事件对象中

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

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

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

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

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

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

5. setState batchUpdate

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

setState主流程
setstate流程

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

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

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

transaction事务机制

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

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

回顾Vue组件渲染和更新过程

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

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

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

上述更新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