深入浅出React之第一章：DOM，也许不是答案

react，新的前端思维方式

1. react的首要思想是通过组件来开发应用。所谓组件，简单的来说就是能完成某个特定功能的、独立的、可重用的代码。通过基于组件的开发模式，把一个大的应用分解成若干小的组件，每个组件只关注于某个小范围的特定功能，但是把组件组合起来，就能够构成一个功能庞大的应用。如果分解功能的过程做的十分巧妙，那么每个组件都可以在不同的场景下面重用，那样不仅可以构建出一个庞大的应用，还可以构建出更灵活的应用。

2. 对比jQuery的开发方式

   2.1 jQuery是如何工作的？

   <div>    <button id='clickMe'>click me</button>    <div>        Click Count:<span id='clickCount'>0</span>    </div></div>

       $(function(){        $('#clickMe').click(function(){            var clickCounter=$('#clickCount');            var count= parseInt(clickCounter.text(),10);            clickCounter.text(count+1);        });})

   在jQuery中，首先需要通过css选择器找到对应的DOM元素，然后挂上对应的事件函数，在事件函数中执行相应的操作。这种方式简单易懂，但是，对于庞大的项目，这种模式会造成代码结构复杂，难以维护。

   2.2 react的方式

       import React,{Component} from 'react';    class ClickCounter extends Component{        constructor(props){            super(props);            this.state={                count:0            }            this.handleClickButton.bind(this);        }        handleClickButton(){            this.setState({                count:this.state.count+1            });        }        render(){            return (                <div>                    <button onClick={this.handleClickButton}>Click Me</button>                    <div>                        Click Count:{this.state.count}                    </div>                </div>            )        }    }

   通过react的方式进行编程，无论何种事件，引发的都是react组件的重新渲染，至于如何只修改必要的DOM部分，无论何种事件，则完全交由React去操作，并不需要开发者去关心。