• react 什么是虚拟DOM?深入了解虚拟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 (DocumnetFragment )和原始的DOM做对比,找差异

    7.找出input框发生了变化

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

    缺陷:

    性能的提升不明显

    三.  react 虚拟DOM

    1.state 数据

    2.jsx 模版

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

    <div id="abc"><span>hello world !</span></div>

    4.生成虚拟DOM(虚拟DOM就是一个js 对象,用它来描述真实DOM)(损耗性能)

    ['DIV',{ id : 'abc'},['span',{},'bye bye']]

    5.state 发生变化

    6..数据 + 模板 生成新的虚拟DOM(极大的提升了性能)

    ['DIV',{ id : 'abc'},['span',{},'bye bye']]

    7.比较原始虚拟DOM和新的虚拟DOM的区别,找到区别是span的内容 (极大的提升了性能)

    8.直接操作DOM,改变span中的内容

    React中虚拟DOM的概念:

    虚拟DOM本质上就是一个JS对象,之所以能够提高性能,本质上是因为js去比较js对象不太消耗性能,而去比较真实的DOM会很消耗性能。

    四. 深入了解虚拟DOM

    实际实现:

    1.state 数据

    2.JSX 模版  JSX->creatElement ->虚拟DOM(JS对象)->真实DOM

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

    ['DIV',{ id : 'abc'},['span',{},'bye bye']]

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

    <div id="abc"><span>hello world !</span></div>

    5. state  发生变化

    6. 数据 + 模板 生成新的虚拟DOM(极大的提升了性能)

    ['DIV',{ id : 'abc'},['span',{},'bye bye']]

    7.比较原始虚拟DOM和新的虚拟DOM的区别,找到区别是span的内容 (极大的提升了性能)

    8.直接操作DOM,改变span中的内容

    优点:

    1.性能提升了

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

    渲染DOM在浏览器上是没有什么问题的,可是在移动端的原生应用里面,我们开发的安卓,iOS机器代码当中里面是不存在DOM的概念的,所以在原生的应用里没有办法生成DOM,也无法被使用,但是有了虚拟DOM就不一样了,我们的代码首先会被转化成一个虚拟DOM,然后它是个js对象,它放在浏览器里可以被识别,同时,它在原生的应用里面也可以被识别,所以这个虚拟DOM不管是在原生应用里面还是在网页应用里面都可以被正确的识别。

    五.  虚拟DOM中的Diff算法

    1.state 数据

    2.JSX 模版 

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

    ['DIV',{ id : 'abc'},['span',{},'bye bye']]

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

    <div id="abc"><span>hello world !</span></div>

    5. state  发生变化

    6. 数据 + 模板 生成新的虚拟DOM(极大的提升了性能)

    ['DIV',{ id : 'abc'},['span',{},'bye bye']]

    7.比较原始虚拟DOM和新的虚拟DOM的区别,找到区别是span的内容 (极大的提升了性能)

     diff算法(diffrence)

    同层比对,

    能不用index做key值就不用index做key值。

    8.直接操作DOM,改变span中的内容

  • 相关阅读:
    010.Python文件指针与文件修改
    009.Python之with管理与文件操作的其他方法
    008.Python之文件的基本操作
    007.Python基础数据类型之元组、字典与集合
    006.Python基础数据类型之字符串与列表
    005.python基础之循环结构与数字类型数据
    004.python基础知识3
    003.python基础知识2
    002.python基础知识1
    001.计算机基础知识
  • 原文地址:https://www.cnblogs.com/Lolita-web/p/10144343.html
Copyright © 2020-2023  润新知