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 ，此为事务机制；
如图所示：文章来源：https://www.toymoban.com/news/detail-560028.html
简单使用伪代码理解：文章来源地址https://www.toymoban.com/news/detail-560028.html
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
到了这里，关于JavaScript Function的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
