React入门03-react中操作组件的dom节点

一、react的虚拟dom

1、在react中，其最大的亮点在于虚拟DOM技术，它极大强度上提升了应用性能。

2、在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因（如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。
3、在react中使用JSX语法来创建一个对象的模板，而这创建出来的并不是一个完整的HTML中DOM，而是一个虚拟DOM，

1.1 react的虚拟DOM机制：

react在浏览器端用javascript实现了一套DOM API，基于React进行开发时，所创建的所有组件都是通过这个虚拟DOM来进行构建的，当数据发生变化时，React都会重新构建整个DOM树，然后将新的DOM树与上一次的DOM树进行对比，得到DOM结构的差异，从而只将有差异的地方进行实际DOM的更新。尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。
总结：所有DOM的变动，都会先在虚拟DOM上发生，通过dom树的前后对比找到差异后再有针对性的只更新差异部分的真实DOM。
关于虚拟DOM和diff算法可参考：http://www.infoq.com/cn/articles/react-dom-diff/

React的优点：
1、虚拟DOM技术：操作对象小，渲染页面会选择性渲染很小的那部分，从而性能更优
2、React只是MVC开发模式中的V部分，其组件式开发提高了代码复用率

二、获取DOM节点

在react中，我们已经知道，组件并不是真实的DOM节点，而是通过虚拟DOM渲染出来的节点，只有当它被插入到文档后，才成为了真实的DOM。
要从组件中获取真实的DOM节点，则可在jsx标签中加入ref属性

    <script type="text/babel">
    var Hello=React.createClass({
        showThis:function(){
            //通过this.refs.username拿取到了ref为username的元素节点
            console.log(this.refs.username.value)
        },
        render:function(){
            return (
                <div>
                    <input type="text" ref="username" onChange={this.showThis}/>
                </div>
            )
        }
    });
    ReactDOM.render(
        <Hello />,
        document.getElementById("box")
    )
    </script>