0. 前言
- 函数式编程
- vdom和diff算法
- JSX本质
- 合成事件
- setState和batchUpdate(必考)
- 组件渲染过程
1. 函数式编程
- 纯函数
- 不可变值
1. 函数的返回结果只依赖于它的参数
2. 函数执行的过程中没有可被观察到的副作用
3. 没有额外的状态依赖
2. Vdom和diff算法
- Vue的h函数和React的createElement
- vnode数据结构
- patch函数
2.1 diff算法
- 只比较统一层级 不跨级比较
- tag不相同，则直接删掉重建，不再深度比较
- tag和key两者都相同，则认为是相同节点，不再深度比较
vue2.x vue3.x 和React三者实现vdom细节不同 但是核心概念和实现思路是一样的
面试主要考察后者
3. JSX本质
- JSX等同于Vue模板
- Vue模板不是HTML
- JSX也不是JS
通过babel网站去看jsx编译出来的东西
JSX编译出来的本质就是React.createElement返回的vnode
JSX style，编译出来的结果。
JSX加载组件 和加载普通JSX基本一样。
JSX事件 当作属性来处理
4. React的合成事件 机制
- React16 事件挂在在document上 17开始挂在在root容器
- event不是原生的是syntheticEvent
- 和Vue事件不同，和DOM事件也不同
React通过合成事件，模拟了原生事件的一些行为。
event.nativeEvent可以获得原生事件
为什么要合成事件机制？
- 为了更好的兼容性和跨平台
- 全部挂载到document/root容器上，减少内存消耗，避免频繁解绑。
- 方便事件的统一管理（事务机制）
React17事件绑定到root
- React16绑定到document
- React17事件绑定到root组件
- 有利于多个React版本并存，例如微前端
5. setState和batchUpdate
- 有时异步（普通使用），有时同步
- 有时合并（对象形式），有时不合并（函数形式）
React无所谓同步和异步，主要看能不能命中isBatchingUpdates
生命周期 React事件 这些React能管理到的入口 可以命中 触发合并更新
setTimeOut，自定义事件 这些react管理不到的 无法命中isBatchingUpdates
深入React细节之batchUpdate讲解通俗，为什么需要用这个机制
6. transaction事务机制
React执行函数之前和之后，分别会有一个initialize和一个close阶段，分别在执行函数之前和之后执行。
initialize阶段会给batchUpdate设置为true，close阶段设置为false
7. React组件渲染和更新过程
- JSX如何渲染为页面
- setState之后如何更新页面
- 面试考察全流程
回顾知识点
- 回顾Vue组件渲染和更新过程
- 回顾JSX本质和Vdom
- 回顾dirtyComponents
