react——state(状态机)

   <h1 id="example"></h1>
     <h1>react state（状态）</h1>
  <p>react把组件看成是一个状态机（state machines）。通过与用户的交互，实现不同状态渲染UI，让用户界面和数据保持一致。</p>
  <p>react里，只需要更新组件的state，然后根据新的state重新渲染用户界面（不要操作DOM）</p>
  <p>以下示例创建了LinkButton组件，getIitialState方法用于定义初始状态，也就是一个对象，这个对象可以通过this.state属性读取，
  当用户点击组件，导致状态变化，this.setState()方法就修改状态值，每次修改以后，自动调用this.render方法，在此渲染组件。</p>
     <script type="text/babel">
         var LinkButton = React.createClass({
             getInitialState: function(){
                 return { liked: true }
             },
             handleClick: function(){
                 this.setState( { liked: !this.state.liked } )
             },
             render: function(){
                 var result = this.state.liked ? "喜欢" : "不喜欢" ;
                 return (
                         <div>
                             <h1 onClick={this.handleClick}>
                                   你<b>{result}</b>我，点击切换！
                             </h1>
                         </div>
                 )

             }
         });
         ReactDOM.render(
                 <LinkButton />,
                 document.getElementById("example")
         )
     </script>