React State (Status)

React State (Status)

React treats components as state machines. By interacting with the user, you implement different states, and then render the UI to keep the user interface and data consistent.

In React, simply update the state of the component and re-render the user interface (do not manipulate the DOM) based on the new state.

The LikeButton component is created in the following instance, and the getInitialState method defines the initial state, which is an object that can be read through the this.state property. W hen the user clicks on the component, causing the state to change, the this.setState method modifies the state value, and after each modification, the this.render method is automatically called to render the component again.

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? '喜欢' : '不喜欢';
    return (
      <p onClick={this.handleClick}>
        你<b>{text}</b>我。点我切换状态。
      </p>
    );
  }
});

React.render(
  <LikeButton />,
  document.getElementById('example')
);

Try it out . . .