ReactJS是一套用于构建用户界面的JS库，13年5月开源，到现在已经更新到了16这个版本。React的一个特点就是性能很高，这得益于它引入了虚拟DOM的概念。
ReactJS
DOM（Document Object Model）文档对象模型就是页面上的元素节点，jQuery和原生JS是命令式的开发，需要我们一步步自己对DOM进行增删改查。可能一半的代码都在操作DOM，而React则不同。
ReactJS是声明式开发。它有响应式的设计，我们定义好数据和模板，React会自动帮我们渲染DOM，我们只需要改变数据它就会帮我们改变DOM。大多数情况下不需要而且也不推荐我们直接操作DOM。
虚拟DOM
加入我们定义好了模板和数据，React会自动的帮我们渲染出DOM结构，这很好。但是当我们改变数据的时候，React就会再一次的渲染，这好像没什么问题，但是要知道，js对DOM的操作是很耗费性能的。有时候我们只改了一小部分，如果全部进行重新渲染，在性能上是极大的浪费。所以React引入了虚拟DOM的概念。
虚拟DOM其实就是JS中的一个对象，他是根据数据和模板生成的对象，包含了整个DOM结构。
['div', {id: "id"}, ['p', {class: 'article', 'hello world'}]]
上面代码就相当于一个虚拟的DOM，div里面有个p标签，p标签里面写了hello world，当然也包含元素上的各个属性。
有了虚拟DOM后，当我们改变数据，React会根据当前的数据和模板生成一个虚拟DOM，然后和上一次生成的虚拟DOM进行比对，找出差异，然后根据差异对DOM进行渲染，当然它不会重新渲染，只会渲染被改变的部分。而虚拟DOM只是JS里面的一个对象，JS对对象的操作是非常快的。所以这种方式极大的提高了性能。
网友评论