React基础语法的学习---1.虚拟DOM

 

注:React也用了几年了，今天开始写个连载博客，对React知识进行一个梳理记录，同时也希望给有需要的朋友提供帮助，如有不足之处请指出，我们共同进步

一  虚拟DOM

要想输出一个hello world 通常我们定义的节点方法为：

     

  <div class='div'> hello world </div>

        如此，标签，属性，内容都被定义

而React内，是采用React.CreateElement()方法，该函数有三个形参，分别是：

     第一个参数是必选，传入标签名称，如ul，li，div等

     第二个参数是选填，表示属性，如className

     第二个参数是选填，表示子节点

    

    var dom = React.CreateElement( 'div',{classNmae:'div'},'hello world' )
    
    console.log(dom)

        当执行此函数时，会返回一个js对象，这个对象就是所谓的虚拟dom 

        当打印这个dom时，控制台会显示如下

  可以看到，type属性是 div，props内则会包括但不限于className，属性的值，样式，子节点内容等。

看到这里有小伙伴会有疑问，为什么要去动态创建虚拟DOM？我直接写出来不行吗？

 原因如下:

首先我们需要认识虚拟DOM:

        DOM是一套web标准，它定义了访问HTML文档属性的的方法，事件和属性，他是连接网页和JavaScript之间的桥梁。

        DOM全称是Document Object Model，即文档对象模型，文档一般指的是HTML文档,DOM对象模型将HTML文档组织为以Node对象为节点的层次结构。一个节点是一个Node对象，Node对象按照节点类型分为元素节点 / 属性节点 / 文本和注释节点。

为什么需要虚拟DOM？

        在开发中，我们经常会操作DOM，每当DOM发生改变时，页面会重新渲染，DOM经常改变会导致页面重绘，DOM操作越多，网页性能越差。至此，虚拟DOM的概念被提了出来

        虚拟DOM概念最早由Facebook内的react团队提出，也是react框架核心概念之一，他是以JS形式存在在内存中描述真实的DOM结构，当页面变动时，前后虚拟DOM对比，计算出如何以最小的代价操作真实DOM

        

        举例：

        若一次操作中由十次更新DOM操作，虚拟DOM不会立即操作DOM，而是将这十次更新的diff内容保存到本地的JS内，最终将JS对象一次性attach到真实DOM树上。避免多次无意义的重绘，提升用户使用质量。

        所以用JS对象操作虚拟DOM好处是，页面更新全部反映在JS对象（虚拟DOM）上，操作内存中的JS对象速度显然更快，更新完毕后，最终由JS对象映射成为真实DOM，交由浏览器绘制。