八.this.state

组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI

<!DOCTYPE html>
<html>
  <head>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/browser.min.js"></script>
  </head>
  <body>
    
    <div id="example"></div>
    
    <script type="text/babel">
      var LikeButton = React.createClass({
        getInitialState:function(){
          return {like:false}
        },
        handleClick:function(){
          this.setState({
            liked: !this.state.liked
          })
        },
        render:function(){
          var text = this.state.liked ? "like" : "haven\'t liked" ;
          return (
            <p onClick = {this.handleClick}>
            You {text} this.Click to toggle.
            </p>
            );
        }
      })

      ReactDOM.render(
        <LikeButton />,
        document.getElementById("example")
        )
    </script>
 
  </body>
</html>

 

上面代码是一个LikeButton组件。它的 getInitialState 用于定义初始值。也就是一个对象，这个对象可以通过 this.state 属性读取
 当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

posted @ 2016-09-13 09:02  约翰·史密斯  阅读(198)  评论(0)    收藏  举报