Home > Article > Web Front-end > What are the statuses of react? Detailed introduction to react status (with complete examples)

What are the statuses of react? Detailed introduction to react status (with complete examples)

寻∝梦Original: 2018-09-11 14:13:071460browse

This article mainly introduces the detailed explanation of the status of react components. If you are interested, you can click in to see the details of the article about react status

React components inevitably have to interact with the user constantly. There is an initial state at the beginning, and then during the interaction with the user, every action of the user may trigger changes in the state machine. The new state is determined by Different React elements displayed. A major innovation of React is to treat components as state machines. When the state changes, React will update the DOM and re-render the page in the most effective way to keep the user interface and data consistent.
1. Working principle of state
1.1 Storage state
React stores the state of the component in this.state.
1, 2 Set the initial value of the state
There are two ways to set the initial value of this.state:
If you create a component using the React.createClass method, use the getInitialState method to initialize the state, for example

　　var scoreComponent=React.createClass({
    getInitialState:function(){
    return{
    score:0
    };
    }
    ......
    });
　如果创建组件是使用 ES6的 extends React.Component方法，在构造器中使用this.state初始化状态。例如：
class scoreComponent extends React.Component{
    constructor(props){
    super(props);
    this.state ={score:60};
        }
    ...}

1.3 Methods to change component state
Use this.setState(data, callback) to change the value of the state. This method can merge data into this.state and re-render the component. The data parameter can be an object or a function that returns an object containing the fields to be updated. The optional callback will be called after the component is re-rendered. The this.setState method modifies the state value. After each modification, the this.render method is automatically called to render the component again. (If you want to see more, go to the PHP Chinese website React Reference Manual column to learn)

1.4 What kind of data should the state contain
UI interaction will lead to changed data.
1.5 What kind of data should state not contain?
1. Calculated data
2. Components
3. Data copied from props
state should contain the most original data, such as Speaking of time, formatting should be left to the presentation layer.
The component should be controlled in the render method.
2. State Development Example
1. Calculate the number of clicks

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React状态机</title>
 <script type="text/javascript" src="js/react.min.js" ></script>
 <script type="text/javascript" src="js/react-dom.min.js" ></script>
 <script type="text/javascript" src="js/browser.min.js" ></script>
  </head>
  <body>
    <p id="example"></p>
    <script type="text/babel">
      var BtnButton = React.createClass({
        getInitialState: function() {
          return {count: 0};
        },
        handleClick: function(event) {
          this.setState({count:this.state.count+1});
        },
        render: function() {
          var text =this.state.count ;
          return (
            <p onClick={this.handleClick}>
              获取点击的次数<br />
                 <span>{text}</span>
            </p> 
          );
        }
      });
      ReactDOM.render(
        <BtnButton />,
        document.getElementById(&#39;example&#39;)
      );
    </script>
  </body>
</html>

In the above example, the BtnButton component was created. The getInitialState method is used to define the initial state, which is an object. This The object can be read through the this.state property. When the user clicks on the component, causing the state to change, the this.setState method modifies the state value. After each modification, the this.render method is automatically called to render the component again.
This article ends here (if you want to see more, go to the PHP Chinese website React User Manual column to learn). If you have any questions, you can leave a message below.

The above is the detailed content of What are the statuses of react? Detailed introduction to react status (with complete examples). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is react? What does react mainly do? (Q&A)Next article：What is react? What does react mainly do? (Q&A)

See more

What are the statuses of react? Detailed introduction to react status (with complete examples)

Related articles