shabbdom主要流程的代码在上面就介绍完毕了，在上面的代码中可能看不出来如果要创建比较复杂的dom，比如有attribute、props、eventlistener的dom怎么办？奥秘就在与shabbdom在各个主要的环节提供了钩子。钩子方法中可以执行扩展模块，attribute、props、eventlistener等可以通过扩展模块实现。
在源码中可以看到hook是在snabbdom初始化的时候注册的。
var hooks = ['create', 'update', 'remove', 'destroy', 'pre', 'post']; var h_1 = require("./h"); exports.h = h_1.h; var thunk_1 = require("./thunk"); exports.thunk = thunk_1.thunk; function init(modules, domApi) { var i, j, cbs = {}; var api = domApi !== undefined ? domApi : htmldomapi_1.default; for (i = 0; i < hooks.length; ++i) { cbs[hooks[i]] = []; for (j = 0; j < modules.length; ++j) { var hook = modules[j][hooks[i]]; if (hook !== undefined) { cbs[hooks[i]].push(hook); } } }
snabbdom在全局下有6种类型的钩子，触发这些钩子时，会调用对应的函数对节点的状态进行更改首先我们来看看有哪些钩子以及它们触发的时间：
比如在patch的代码中可以看到调用了pre钩子
return function patch(oldVnode, vnode) { var i, elm, parent; var insertedVnodeQueue = []; for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i](); if (!isVnode(oldVnode)) { oldVnode = emptyNodeAt(oldVnode); }
我们找一个比较简单的class模块来看下其源码：
function updateClass(oldVnode, vnode) { var cur, name, elm = vnode.elm, oldClass = oldVnode.data.class, klass = vnode.data.class; if (!oldClass && !klass) return; if (oldClass === klass) return; oldClass = oldClass || {}; klass = klass || {}; for (name in oldClass) { if (!klass[name]) { elm.classList.remove(name); } } for (name in klass) { cur = klass[name]; if (cur !== oldClass[name]) { elm.classList[cur ? 'add' : 'remove'](name); } } } exports.classModule = { create: updateClass, update: updateClass }; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = exports.classModule; },{}]},{},[1])(1) });
可以看出create和update钩子方法调用的时候，可以执行class模块的updateClass：从elm中删除vnode中不存在的或者值为false的类。
将vnode中新的class添加到elm上去。
总结snabbdom
vnode是基础数据结构
patch创建或更新DOM树
diff算法只比较同层级
通过钩子和扩展模块创建有attribute、props、eventlistener的复杂dom