虚拟DOM

2020-03-01  本文已影响0人  X_y_bfc1
原始DOM
    1.state
    2.JSX模板
    3.数据加模板生成真实的DOM来显示
    4.state发生改变之后
    5.数据加模板结合生成DOM,来替换原来的DOM
缺陷
    第一次生成的完整DOM,第二次又生成一个DOM ,替换原来的,非常耗性能
   
    
第一次改变
     1.state
    2.JSX模板
    3.数据加模板生成真实的DOM来显示
    4.state发生改变之后
    5.数据加模板结合生成DOM,与原来的DOM做比对,找差异
    6.找到差异以后,只替换有差异的部分
缺陷
    这种改变并不明显
    
    
虚拟DOM
    1.state
    2.JSX模板
    3.数据加模板生成真实的DOM来显示
        <div><span>hello</span></div> 
    4.生成虚拟DOM (就是一个js对象,用来描述虚拟DOM)其实这一步损耗了性能,但是很小
        ['div':'id':'ID',['span',{},'hello']]
    5.state发生变化
    6.数据+模板生成新的虚拟DOM (极大提升了性能)
        ['div':'id':'ID',['span',{},'world']]
    7.比较新的虚拟DOM和原始虚拟DOM
    8.直接操作DOM 替换改变的内容
上一篇 下一篇

猜你喜欢

热点阅读