snabbdom vdom 框架

1、snabbdom

github地址：https://github.com/snabbdom/snabbdom

2、核心方法

var vnode = h('div#container.two.classes', {on: {click: someFn}}, [h('span', {style: {fontWeight: 'bold'}}, 'This is bold'),' and this is just normal text',h('a', {props: {href: '/foo'}}, 'I\'ll take you places!')
]);
// Patch into empty DOM element – this modifies the DOM as a side effect
patch(container, vnode);var newVnode = h('div#container.two.classes', {on: {click: anotherEventHandler}}, [h('span', {style: {fontWeight: 'normal', fontStyle: 'italic'}}, 'This is now italic type'),' and this is still just normal text',h('a', {props: {href: '/bar'}}, 'I\'ll take you places!')
]);
// Second `patch` invocation
patch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new state

即：h方法和patch方法。

3、h方法

h方法用来创建vonde

h('<标签名>',{属性}, [子元素])
h('<标签名>',{属性}, '文本标签')

4、pacth方法

pacth方法用来将vnode渲染为html。

首次渲染：

// Patch into empty DOM element – this modifies the DOM as a side effect
patch(container, vnode);

更新渲染：

patch(vnode, newVnode);

转载于:https://www.cnblogs.com/mengfangui/p/10201608.html

snabbdom vdom 框架相关推荐

alpine 交互sh_在这个免费的交互式教程中学习Alpine JS
alpine 交互sh Alpine.js is a rugged, minimal framework for composing Javascript behavior in your marku ...
前端面试题（react）
说说React中onClick绑定后的工作原理首先react有自己的事件系统,也是遵循w3c的,这个事件系统的名称叫做合成事件(SyntheticEvent),而其自定义事件系统的动机主要包含以下几 ...
vue核心之虚拟DOM(vdom)与真实DOM页面渲染过程
一.真实DOM和其解析流程? 浏览器渲染引擎工作流程都差不多,大致分为5步,创建DOM树--创建StyleRules--创建Render树--布局Layout--绘制Painting 第一步,用HTM ...
vue的Virtual Dom实现- snabbdom解密
vue在官方文档中提到与react的渲染性能对比中,因为其使用了snabbdom而有更优异的性能. JavaScript 开销直接与求算必要 DOM 操作的机制相关.尽管 Vue 和 React 都使 ...
解密虚拟 DOM——snabbdom 核心源码解读
本文源码地址:https://github.com/zhongdeming428/snabbdom 对很多人而言,虚拟 DOM 都是一个很高大上而且远不可及的专有名词,以前我也这么认为,后来在学习 V ...
2021 最流行的十大 JS 框架，前三又换牌了，最值得关注的是 Svelte 和 Solid 的崛起！...
大家新好呀,我是你们的猫哥,那个不喜欢吃鱼.又不喜欢喵的超级猫 ~ 先来看看排行榜吧,知道一下目前最流行的项目都有哪些. React 首次成为头号 UI 框架,但如果我们考虑到 Vue.js 被分 ...
结合vue、react、angular谈谈MVC、MVP、MVVM框架
首先,在谈这个话题之前, 我们有必要了解一下库和框架的区别. 我们先来看react官网以及vue官网对他们的定位: react: vue: react我们不说了,官网上明明白白说了,人家是一个libr ...
【Virtual DOM】虚拟 DOM 和 Snabbdom 库
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读 Virtual DOM 基本介绍什么是 Virtual DOM Virtual DOM(虚拟 DOM),是由普通的的 ...
从Preact了解一个类React的框架是怎么实现的(二): 元素diff
前言首先欢迎大家关注我的掘金账号和Github博客,也算是对我的一点鼓励,毕竟写东西没法获得变现,能坚持下去也是靠的是自己的热情和大家的鼓励. 之前分享过几篇关于React的文章: React技术内 ...
前端框架千千万，抓住两条主线成一半
作者:大漠穷秋百花齐放的前端框架 2007 年的时候我刚毕业,当时最火的前端框架是 jQuery 和 Ext JS,那时候大家纠结的问题是:我到底是用 jQuery 呢还是用 Ext JS 呢? 后 ...

snabbdom vdom 框架

snabbdom vdom 框架相关推荐

最新文章

热门文章