没有手撸过virtual dom的人，肯本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。定以为component就是virtua【原创内容，转载请注明出处】【转载请注明来源】l dom了，但实际上不是，virtua【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。l dom只是个依赖，生命周期这种东西只【版权所有，侵权必究】未经授权，禁止复制转载。是component自己臆想的，跟vir【转载请注明来源】【版权所有】唐霜 www.tangshuang.nettual dom没半毛关系。我自己写hs转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】t-virtual-dom之后，大致梳理【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。清楚了生命周期的问题。我们来看下使用hs【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。t-virtual-dom的代码：

let vdom = new HSTVirtualDOM({ template, state })
...
vdom.create()
...
vdom.mount('#app')
...
vdom.update(newState)
...
vdom.destroy()

看到来吧，这就是在完全没有compone转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netnt情况下，怎么使用一个virtual 转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。dom的过程。它提供来四个方法来进行操作【未经授权禁止转载】本文作者：唐霜，转载请注明出处。，create是生成vtree，这个时候本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】只有一个和DOMtree对应的js对象，本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】这个对象就是vtree，完全按照DOMt本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netree的结构生成，只不过它是一个js对象【本文首发于唐霜的博客】未经授权，禁止复制转载。。mount动作通过createElem【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】ent，利用vtree创建来真正的DOM【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。结构，并挂载到传入的selector上。【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】create和mount这两个动作其实可未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net以自动处理，如果实例化的时候传入来sel【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。ector，就自动调用这两个方法。

update和destroy是在外部调用【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。的，不可以自动处理。update是传入新本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。的state，和老的state merg【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.nete之后更新界面。它的处理过程是，先通过c本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】reate创建一个新的vtree，通过d【本文受版权保护】【本文受版权保护】iff算法得到新老vtree之间的差异，本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】然后把这些差异patch到真实的DOM节【本文受版权保护】【原创内容，转载请注明出处】点上。destroy则是把创建的真实DO著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。M，以及它们绑定的事件监听销毁。

一个component干了什么事呢？它其【版权所有，侵权必究】【未经授权禁止转载】实是对virtual dom的封装，完全【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。暴露给外面的，不是virtual dom著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】的方法，反而是一些围绕virtual d转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】om的辅助方法：

let component = new Component() 
-> 
· this.getDefaultProps()
· this.getInitialState() => state
· this.componentWillMount()
->
· this.render() => template，或者说render本身已经自建了vtree
this.vdom = new HSTVirtualDOM({ template, state })
->
· this.beforeCreate() // vue
this.vdom.create()
· this.created() // vue
->
this.beforeMount() // vue
this.vdom.mount(selector)
this.mounted() // vue
this.componentDidMount()
// 下面进入存在期
this.componentWillReceiveProps()
this.shouldComponentUpdate()
this.componentWillUpdate()
this.render() => newTemplate => this.vdom.template = newTemplate
this.beforeUpdate() // vue
this.vdom.update(newState)
this.componentDidUpdate()
this.updated() // vue
// 下面进入销毁期
this.componentWillUnmount()
this.beforeDestroy() // vue
this.vdom.destroy()
this.destroyed() // vue
// 这个时候对于hst-virtual-dom来说，vdom.vtree还在，如果想要彻底销毁，只需要this.vdom = null

这样你就可以看到，一个component【本文首发于唐霜的博客】【版权所有，侵权必究】是多么的不起眼，只不过在调用vdom的方【原创不易，请尊重版权】【作者：唐霜】法前不断干一些看上去是生命周期，实际上是本文作者：唐霜，转载请注明出处。原创内容，盗版必究。一些在执行vdom操作前后的普通调用而已【原创内容，转载请注明出处】原创内容，盗版必究。的函数。而对于一些初学者而言，拼命的研究【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】生命周期函数，以为即掌握了react的精【原创内容，转载请注明出处】未经授权，禁止复制转载。髓。