react 原理

vdom 和 diff

• 和 Vue 类似，参考：https://blog.csdn.net/DGogoing/article/details/130882406
• h 函数即 render 函数：返回 vNode
• vnode 主要数据结构：tag（标签）、props（属性）、children（子集）
• patch 函数：渲染真实 dom

---

React、Vue 区别

• 相同点： 支持组件化，数据驱动视图，使用vdom
• 不同点：React使用jsx，Vue模板拥抱html、React函数时编程，Vue声明式编程

---

模板编译 JSX

• JSX 等同于 Vue 模板， Vue 模板不是 html， JSX 不是 JS
• JSX 被编译成 React.createElement() 对象即 h / render 函数，执行返回 vNode

const elem = <div><p>text</p></div>

参数：tag（标签）、props（属性）、children（子集）

var elem = React.createElement("div",null,React.createElement("p",null,"text"))

---

合成事件

• 在 react 16 之后，事件顶层为 root，react 16 为 document
• 为什么使用合成事件机制：兼容和跨平台，挂载到顶层减少内存消耗，避免频繁解绑
• 方便事件的统一管理（如transaction事务机制）

---

setState、batchUpdate

• setState 16 / 17 版本为异步，dom事件和定时器为同步，18 版本皆为异步
• 函数式不会合并多次 setState

• 以上图示：如果命中异步（既命中 batchUpdate 事件机制 ）会从左边执行，同步会从右边执行
• 异步流程：当执行 setState 时，内部会定义 isBatchingUpdates = true，类似于开关，执行完毕为 false
• 如图所示：定时器为回调异步（事件循环机制）

---

transaction 事务机制

以上在执行 increasse 函数，会先执行 initalize ，再执行函数本身，最后执行 close ，此为事务机制；
如图所示：

简单使用伪代码理解：

transaction.initalize = function(){}
transaction.close = function(){}
function method(){}
transaction.perform(method)

---

组件渲染和更新过程

• 渲染过程：render() 生成 vnode —> patch(elem, vnode)
• setState(newState) ----> dirtyComponents —> render() 生成 newVnode ----> patch(vnode, newVnode)
• React 中的 patch 可拆分为两个阶段：reconciliation 阶段（执行 diff 算法，纯计算），commit 阶段（将 diff 结果渲染）
• reconciliation：渲染一个 React 应用程序时，一个描述应用程序的节点树被生成并保存在内存中，然后将该树刷新到渲染环境，当应用程序更新时（通常为 setState），会生成一棵新树，新树与之前的树进行比较，以计算更新渲染应用程序所需的操作
• commit：react fiber（react内部运行机制）：将reconciliation阶段任务拆分，DOM需要渲染时暂停空闲时恢复即window.requestIdleCallback