Detailed explanation of the abbreviation of state in react

Preface

What is state

We all say that React is a state machine. How is it reflected? It is reflected in the state. Through interaction with the user, different states are realized, and then the UI is rendered, so that the user's data and interface remain consistent. State is a private property of a component.

In React, updating the state of a component will result in the re-rendering of the user interface (without manipulating the DOM). In other words, the user interface will change as the state changes.

PS: state can only be initialized in this component, and state can only be modified and queried by this component, and cannot be queried and modified externally, so it can also be said that state is private to the component.

Here's a shorthand way to write react's state.

State is used for initialization in react. this.state should be considered a private property of a component. There are two ways to write our react state. One is the constructor we saw on the official website.

 constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

But when using state in a class component, the class inherits React.Component

class App extends React.Component {
         //The state we define here is the same as the method above // ​​You can directly write the assignment statement state={aff:1} in the class
 
             render(){  
                 console.log(this);
                 //This this inherits React.Component
                 // Here this is the instance object of the current component return (
                     <div>
                       123
                     </div>
                 )
             }
       }

       ReactDOM.render(
           <Appt/>,
           document.getElementById('app')
       )

I believe everyone wants to see what this prints. Please look down.

This is the result of printing this in our abbreviated state. Let's look at the result of printing this in our official website.

 class App extends React.Component {
        constructor(props) {
            super(props)
            console.log(this,11);
           // This is our normal method of initializing state this.state={
                num: 456
            }
        }
             render(){  
                 return (
                     <div>
                       123
                     </div>
                 )
             }
       }

       ReactDOM.render(
           <Appt/>,
           document.getElementById('app')
       )

The printing results are the same in both ways.

State: Summary

state is the most important property of a component object. The value is an object (which can contain multiple key-value combinations)

This is the end of this article about the abbreviation of react's state. For more relevant react state content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!