React的思想

react是什么

react是开发出来用来促进UI交互的，建立带有状态的、可复用的UI组件的IU库
react不只能够在浏览器端使用，还能够在服务器端使用，还能够两端一块儿使用。
react的底层概念：运用的是virtual DOM（虚拟DOM）,而后根据UI组件的状态变化，有选择的渲染DOM的节点树，尽量的操做最少的DOM来更新组件。

虚拟DOM是怎么工做的

1.在Web开发中，须要将数据的变化实时反映到UI上，就须要对DOM进行操做，可是复杂频繁的DOM操做会产生性能瓶颈。因此DOM就引入了虚拟DOM的机制。
实际上，在React中，render方法获得的实际上不是真实的DOM节点，而仅仅是轻量级的JavaScript对象，咱们称之为虚拟DOM.

2.虚拟DOM是React的一大亮点，具备批处理（batching）和高效的Diff算法。无需担忧性能问题而毫无顾忌的随时刷新整个页面，由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操做。
了解React虚拟DOM的机制就能够更好的理解React组件的生命周期，并且对于进一步优化React组件的生命周期。
若是没有虚拟DOM，就至关于重置innerHTML,在数据变更比较大的状况下，比较合理，可是若是只有一小部分数据变化时，也要重置整个innerHTML,这就形成了很大的浪费。
二者的比较
innerHTML: render html string + 从新建立全部的DOM元素
virtual DOM: render Virtual DOM + diff + 必要的DOM更新。

3.和DOM操做比起来，js计算仍是很是便宜的。Virtual DOM + diff 显然要比render string慢，可是后面的DOM操做就比较便宜了。
DOM彻底不属于JavaScript，也不在JavaScript引擎中，JavaScript其实是一个独立的引擎，而DOM实际上是浏览器引出的一组让JavaScript操做HTML文档的API而已，在即时编译的时代下，调用DOM的开销是很大的，而Virtual DOM的执行彻底都在JavaScript引擎中，不存在这个开销。

4.React.js相对于直接操做原生DOM有很大的性能优点，很大程度上归功于虚拟DOM的batching和diff，batching把全部的DOM操做搜集起来，一次性提交给真实的DOM,

什么是虚拟DOM

React中，将真实的DOM抽象成一个JavaScript对象，也就是虚拟DOM,好比构造一个虚拟的DOM.

var element = {
    element: 'ul',
    props: {
        id: 'list'
    },
    children: [
        {element:'li',props:'li1',children:['这是第一个li']},
        {element:'li',props:'li2',children:['这是第二个li']}
    ]
}

//element.js
function Element(tagName,props,children){
    this.tagName = tagName;
    this.props = props;
    this.children = children;
}

module.exports = function(tagName,props,children){
    return new Element(tagName,props,children)
}

var el = require('./element');
var ul = el('ul',{id:'ulist'},[
        el('li',{id:'list1'},['1list']),
        el('li',{id:'list2'},['list2'])
])
//ul只是一个JavaScript对象表示的DOM结构，页面上并无这个结构，能够根据这个ul构建真正的<ul>
Element.prototype.render = function(){
    var d = document.createElement(tagName);
    //获取props
    var props = this.props;
    for (key in props) {
        var propValue = props[key];
        d.setAttribute(key,propValue);
    }

    //获取children
    var children = this.children || [];
    children.forEach(function(child){
      // if (child instanceof Element){
        //     tnode = child.render();
        // }
        // else{
        //     tnode = document.createTextNode(child);
        // }
        var childEl = (child instanceof Element) ? child.render():document.createTextNode(child)
        d.appendChild(childEl);
    })
    return d;
}

var ulRoot = ul.render();
document.body.appendChild(ulRoot);
//ulRoot是真正的DOM节点，把它塞入文档中，这样body里面就有了真正的<ul>的DOM结构。

在React中，也有一个render函数，当React中有state转移的过程，因此每次state有变化以后，就会触发render函数，从新构造一个虚拟DOM树，对比新旧DOM树的差异，记录下差异，而后只针对差别部分对应的真实DOM进行操做。先总结到这里，下一篇博客，详细讲解Diff算法。