为什么选择我--ReactJS

在页面中如何大面积操作DOM的话,性能肯定是一个很大的问题,然而聪明的ReactJS实现了Virtual DOM技术，这是他的亮点之一。将组件的DOM结构映射到这个Virtual DOM对象上，并且ReactJS还实现了一套Diff算法，这也是他亮点之一。当需要更新组件的时候，会通过Diff算法找到要变更的内容，最后，在把这个修改更新到实际的DOM节点上，所以，组件更新实际上不是真的渲染整个DOM树，而是指更新需要修改的DOM节点，这样在性能上会比原生DOM快很多。

那么这个Virtual DOM到底是什么？假设我们要创建一个组件，其结构如下:

<ul>
    <li>
        A
    </li>
    <li>
        <ul>
            <li>
                B
            </li>
        </ul>
    </li>
</ul>

然后我们开始创建原生组件：

//用JSX实现的
var root = <ul>
        <li>A</li>
        <li>
            <ul>
                <li>
                    B
                </li>
            </ul>
        </li>
    </ul>;
//用javascript实现的
var A = React.createElement('li',null,'A');
var B = React.createElement('ul',null,React.createElement('li',null,'B'));
var root = React.createElement('ul',null,A,B);
//输出虚拟的DOM结构
console.log(root);

打开控制台我们就能看到输出的一个javascript的对象，没错这就是我们所说的Virtual DOM对象；

接下来我们看看Diff算法在ReactJS中的体现,首先我们借助浏览器中的MutationObderver功能,对页面元素进行监听

'use strict';
const mutation = window.MutationObserver 
                ||window.WebKitMutationObserver
                ||window.MozMutationObserver;
if(!!mutation){
    const mutationObserver = new mutation((item) => {
        item.forEach((item) => {
            console.log(item);
        });
    });
    const options = {
        "childList" : true,
        "attributes" : true,
        "characterData" : true,
        "subtree" : true,
        "attributeOldValue" : true,
        "characterDataOldValue" : true
    };
    mutationObserver.observe(document.body,options);
}

 然后再把ReactJS组件的生命周期进行封装，便于组件来调用

'use strict';
const LifeCycle = name => {
    let obj = {
        name : name
    };
    return Object.assign(obj,Cycle);
};
const Cycle = {
    getDefaultProps:function(){
        console.log(this.name,'getDefaultProps');
        return {};
    },
    getInitialState:function(){
        console.log(this.name,'getInitailState');
        return {};
    },
    componentWillMount:function(){
        console.log(this.name,'componentWillMount');
    },
    componentDidMount:function(){
        console.log(this.name,'componentDidMount');
    },
    componentWillRecieveProps:function(){
        console.log(this.name,'componentWillRecieveProps');
    },
    shouldComponentUpdate:function(){
        console.log(this.name,'shouldComponentUpdate');
        return true;
    },
    componentWillUpdate:function(){
        console.log(this.name,'componentWillUpdate');
    },
    componentDidUpdate:function(){
        console.log(this.name,'componentDidUpdate');
    },
    componentWillUnmount:function(){
        console.log(this.name,'componentWillUnmount');
    }
}; 

接着定义需要用到的组件

'use strict';
//A组件
let A = React.createClass({
    mixins:[LifeCycle('A')],
    render:function(){
        console.log('A','render');
        return (
            <ul>
                <li>A</li>
                <li>
                    <ul>
                        {this.props.children}
                    </ul>
                </li>
            </ul>
        );
    }
});
//B组件
let B = React.createClass({
    mixins:[LifeCycle('B')],
    render:function(){
        console.log('B','render');
        return (
            <li>B</li>
        );
    }
});
//C组件
let C = React.createClass({
    mixins:[LifeCycle('C')],
    render:function(){
        console.log('C','render');
        return (
            <li>C</li>
        );
    }
});
//D组件
let D = React.createClass({
    mixins:[LifeCycle('D')],
    render:function(){
        console.log('D','render');
        return (
            <li>D</li>
        );
    }
});

最后，定义我们的主逻辑

console.log('----------------first-----------------');
React.render(
    <A><B></B><C></C></A>,
    document.body
);

setTimeout(() => {
    console.log('-----------------second--------------');
    React.render(
        <A><B></B><D></D><C></C></A>,
        document.body
    );
},1000);

常规的做法就是将B和C组件先删除，然后依次创建和插入A,B,C组件。接下来我们打开浏览器的控制台看下ReactJS是怎么做的         

           

从日志中可以看出，React的Diff算法的结果是，A组件不变，先将C组件进行删除，然后在创建D组件并插入D组件，最后创建并插入C组件，这比我们常规的做法省去了对B组件的删除操作。这样其实并没有将Diff算法的作用发挥到极限。下面我们调整下逻辑代码：

console.log('----------------first-----------------');
React.render(
    <A key="A"><B key="B"></B><C key="C"></C></A>,
    document.body
);

setTimeout(() => {
    console.log('-----------------second--------------');
    React.render(
        <A key="A"><B key="B"></B><D key="D"></D><C key="C"></C></A>,
        document.body
    );
},1000);

主要的修改就是给每个组件加了一个key属性，此时再来运行下代码看下控制台的日志：

       

可以看出，这次Diff算法与之前的有很大的不同。B组件不变，C组件不变，只是在C组件之前创建并插入了D组件。

以上便是Virtual DOM和Diff算法的一些简单的使用和分析，学习来源：

http://calendar.perfplanet.com/2013/diff/ 《React Native入门与实践》