State is one of the three properties of React

Understand what state is?

First of all, let’s use the simplest words to understand, such as everyone has his own state, everyone’s state will affect his behavior,

So, we put this sentence in react to understand, think of people as components, components also have their own state, the state of the component will affect

Its page.

When we visit the major web pages, we will find some data on the web pages, such as personal information account numbers and some news lists and so on. All of these

It’s data, we put that data on the page, so what’s driving the change in the page? Is the data. That’s all we need to do

Put the data in the state, and when we change the state, the page changes.

1. First let’s create a React project using scaffolding

2. Start the project, go to SRC/app.js and modify it to the following file

import React, { Component } from 'react' export default class App extends Component { render() { console.log(this) return ( <div> < div>)}}Copy the code

3. Open the console to see the following

4. We printed this in the render() method and you can see it on the instance object of this component. There’s already a state (that’s what react gives you)

Now let’s go back to the first question and understand what is state?

1. State is the most important property of component objects, and the value is the object (which can contain multiple combinations of key: value). Although it is null when initialized, it is a {} in pre-React versions.

2. Components are called state machines, which update the corresponding page display by updating the state in the component (re-render the component).

Note: The component and the react component put the state in the instance object because of the function. The function does not even have this state. After considering that beginners have not touched hooks

Let’s start with class components.

Initialize the state

1. First let’s create a new component like this:

import React, {Component} from 'react' export default class App extends Component {constructor(props) {super(props) this.state = { isHot: true } } render() { console.log(this) return ( <div>123</div> ) } }Copy the code

We put a constructor in our class called constructor super (we’ll give props until we get to the details in this chapter)

2. In the constructor we change the state in the instance object and that’s when we start the project and open the console

You can see that we have initialized a state key: isHot value:true

3. We change the code in the render method to look like this:

Render () {console.log(this.state) return (<h2> it's hot today {this.state.ishot? }</h2>)}Copy the code

Open the page and console and let’s take a look

Event binding in React

It is important to note that in native JS, onclick, onblur… In React, it’s all onClick, onBlur

1. Next we modify the code as follows

import React, { Component } from 'react' export default class App extends Component { constructor(props) { super(props) this.state = { }} render() {return (<h2 onClick={clickTitle()}> {this.state.ishot? 'hot' : 'cold '}</h2>)}} function clickTitle() {console.log(' title clicked '); }Copy the code

2. When we go to the console we can see that the console has already printed before we’ve clicked on it.

We can think about why?

OnClick = {clickTitle()}

We’re going to give the return value directly to onClick and it’s going to automatically click on you

OnClick = {clickTitle()} onClick = {clickTitle}

When we go back to the page we can see that we are ready to click normally

This in the class method

Here we continue where we left off in the previous section.

What do I do when I need to click on the title to turn hot into cold? We need to change the code to look like this:

import React, { Component } from 'react' export default class App extends Component { constructor(props) { super(props) this.state = { IsHot: true}} clickTitle() {console.log(' title was clicked '); } render() {return (<h2 onClick={this.clicktitle}> {this.state.ishot? 'hot' : 'cold '} /h2>)}}Copy the code

First we just need to move the function from the outside of the instance to the inside of the instance

So where is the clickTitle method?

It is placed on an instance object of the class for instance use

So we need to be able to

<h2 onClick={this.clicktitle}> {this.state.ishot? }</h2>Copy the code

In this sentence, change to this.clicktitle

Start the project and find that the title is still clickable

Next we change the code inside the function to

clickTitle() {
    console.log(this.state.isHot);
}
Copy the code

The console will report an error

And when we print this, we see that this is undefined

This is undefined for constructor and render. This is undefined for constructor. This is undefined for constructor and render

The first thing we need to know is that clickTitle is an instance object only if the clickTitle method is called from an instance object of the component

This in constructor must be the instance object of the current instance is a fixed thing

Note: It is important to know that clickTitle is not called by the App instance

Now the next thing to think about is why is this undefined and not window since this instance is not calling it?

Note: If you define a method in the class, it will automatically turn on strict mode in the method you define. This is undefined and the class automatically turns it on for you

Solve this pointing problem in class

Add the following code to constructor

constructor(props) { super(props) this.state = { isHot: This.clicktitle = this.clicktitle.bind (this)}Copy the code

At this point, let’s go to the console and click on the title

This.clicktitle = this.clicktitle.bind (this) this piece of code itself is an assignment statement we added a method to the instance object itself where did this method come from? It’s from the prototype

Use of setState in React

Here we continue where we left off in the previous section.

Let’s change the contents of the function body to the following:

clickTitle() { this.state.isHot = ! this.state.isHot }Copy the code

After running the project, clicking on the title still does not change the content of the title

We print this.state.ishot from the function

You can see that the isHot value is changing but why isn’t the page updated

Serious note: State cannot be changed directly, this.state.ishot =! The line this.state.ishot is wrong

Here we need to use a built-in API to change the value of state setState(). We can find this by printing this in the body of the function

Modify the following code in the body of the function:

clickTitle() { this.setState({ isHot: ! this.state.isHot }) }Copy the code

At this point we can click on the title of the page to switch

Note: Changing the value of state must be changed using setState, and the change is a merged action and not a direct replacement for setState

Short for State

Change the code to the following:

import React, { Component } from 'react' export default class App extends Component { // constructor(props) { // super(props) // this.state = { // } // this.clickTitle = this.clickTitle.bind(this) // } state = { isHot: true } // clickTitle() { // this.setState({ isHot: ! this.state.isHot }) // } clickTitle = () => { this.setState({ isHot: ! This.state.ishot})} render() {return (<h2 onClick={this.clicktitle}> it's very hot today {this.state.ishot? 'hot' : 'cold '} /h2>)}}Copy the code

Here we take state directly from Constructor

So in our class, we’re just going to write an assignment statement which is equivalent to adding a property to our APP instance object and the name of the property is state and its value is {isHot:true}

Then comment out this.clickTitle = this.clicktitle.bind (this)

We also added a new method on the instance object where the clickTitle value is an arrow function, thus eliminating the problem of this pointing to the object by preventing constructor from frequently using bind to this

After commenting out these two lines we can comment out constructor because we don’t write anything in it

Here is the complete code

Import React, {Component} from 'React' export default class App extends Component {state = {isHot: ClickTitle = () => {this.setstate ({isHot:! This.state.ishot})} // render() {return (<h2 onClick={this.clicktitle}> it's very hot today {this.state.ishot? 'hot' : 'cold '} /h2>)}}Copy the code