zoukankan      html  css  js  c++  java
  • 1.React中的虚拟DOM

    1.state 数据

    2.JSX模板

    3.数据+ 模板 结合,生成真实的DOM,来显示

    4.state发生改变

    5.数据 + 模板 结合,生成真实的DOM,替换原始的DOM

    缺陷:

    第一次生成了一个完整的DOM片段

    第二次生成了一个完整的DOM片段

    第二次的DOM替换第一次的DOM,非常耗性能

    1.state 数据

    2.JSX模板

    3.数据 + 模板 结合,生成真实的DOM,来显示

    4.state发生改变

    5.数据 + 模板 结合,生成真实的DOM,并不直接替换原始的DOM

    6.新的DOM(DocumentFragment)和原始的DOM做对比,找差异

    7.找出input框发生了变化

    8.只用新的DOM中的input元素,替换掉老的DOM中的input元素

    缺陷:

    性能的提升并不明显

    1.state数据

    2.JSX模板

    3.数据 + 模板 生成虚拟DOM(虚拟DOM就是一个JS对象,用他来描述真实DOM)   (损耗了性能)

     ['div',{id:'abc'},['span',{},'hello world']]

    4.数据 + 模板 结合,生成真实的DOM,来显示

     <div id ='abc'><span>hello world</span></div>

    5.state发生变化

    6.数据 + 模板 生成新的虚拟DOM   (极大提升了性能)
     ['div',{id:'abc'},['span',{},'baybay']]
    7.比较原始虚拟DOM和新的虚拟DOM的区别,找到区别是span中的内容   (极大的提升了性能)
    8.直接操作DOM,改变span中的内容
     

    1.state数据

    2.JSX模板

    3.数据 + 模板 生成虚拟DOM(虚拟DOM就是一个JS对象,用他来描述真实DOM)   (损耗了性能)

     ['div',{id:'abc'},['span',{},'hello world']]

    4.用虚拟DOM的结构生成真实的DOM,来显示

     <div id ='abc'><span>hello world</span></div>

    5.state发生变化

    6.数据 + 模板 生成新的虚拟DOM   (极大提升了性能)
     ['div',{id:'abc'},['span',{},'baybay']]
    7.比较原始虚拟DOM和新的虚拟DOM的区别,找到区别是span中的内容   (极大的提升了性能)
    8.直接操作DOM,改变span中的内容
     

    1.state数据

    2.JSX模板

    3.数据 + 模板 生成虚拟DOM(虚拟DOM就是一个JS对象,用他来描述真实DOM)   (损耗了性能)

     ['div',{id:'abc'},['span',{},'hello world']]

    4.用虚拟DOM的结构生成真实的DOM,来显示

     <div id ='abc'><span>hello world</span></div>

    5.state发生变化

    6.数据 + 模板 生成新的虚拟DOM   (极大提升了性能)
     ['div',{id:'abc'},['span',{},'baybay']]
    7.比较原始虚拟DOM和新的虚拟DOM的区别,找到区别是span中的内容   (极大的提升了性能)
    8.直接操作DOM,改变span中的内容

     优点:

    1.性能提升了。

    2.使得跨端应用得以实现。React native

     
     
  • 相关阅读:
    【笔记】网易微专业-Web安全工程师-04.WEB安全实战-7.SQL回显注入
    【笔记】网易微专业-Web安全工程师-04.WEB安全实战-6.文件上传
    【笔记】网易微专业-Web安全工程师-04.WEB安全实战-5.文件包含
    【笔记】网易微专业-Web安全工程师-04.WEB安全实战-4.CSRF
    zoom和transform:scale的区别
    图片上黑色透明遮罩的实现
    如何实现两行文本增多显示省略号
    H5如何实现一行三列布局
    H5瀑布流如何实现
    H5一行显示两个正方形
  • 原文地址:https://www.cnblogs.com/wangwenhui/p/10940013.html
Copyright © 2011-2022 走看看