深入浅出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去操作，并不需要开发者去关心。