SoFunction
Updated on 2025-04-07

How much do you know about state and setState in React component

Basic use of state

State (state) is data, which is private data inside the component and can only be used inside the component.

The value of state is an object, and the state can be obtained by obtaining it.

setState() modify the status

The state is variable, and the state can be changed by ({data to be modified})

Note: It is different from vue syntax. Do not modify the value in state directly. It is wrong at this time!

//correct ({
     count:+1
 })
//mistake+=1

Finally, based on the above content, we wrote a simple accumulator, but before this, we need to solve this pointing problem in custom methods, otherwise this pointing will be undefined, and we generally hope this pointing to component instances.

Solution:

1. Arrow function

The characteristics of using arrow functions themselves to not bind this

class App extends {
    state={
       count:0, 
    }
    render(){
        // This in the arrow function points to the external Han Jing, here it points to the render() method        return (
            <div>
                <span>total：{}</span>
                <button onClick={()=>{
                    ({
                        count:+1
                    })
                }}>Click+1</button>
            </div>
        )
    }
}
(<App/>,('root'));

However, this method will lead to too complicated code in JSX syntax, which is not conducive to indicating the project structure and is generally not recommended.

()

Using the bind method in ES5, bind this in the event handler with the component example.

class App extends {
    constructor(){
        super()//Super() must be written, at this time a requirement of class in ES6 syntax        //At this time, state can be placed in constructor()        ={
            count:0, 
         }
        =(this)//Point this to bind to instance    }
    //Event Handler    add(){
        ({
            count:+1
        })
    }
    render(){
        // This in the arrow function points to the external Han Jing, here it points to the render() method        return (
            <div>
                <span>total：{}</span>
                <button onClick={}>Click+1</button>
            </div>
        )
    }
}
(<App/>,('root'));

Example method

Class instance method using arrow function form, this method is relatively concise and highly recommended

Note: This grammar is experimental, but due to the existence of babel in scaffolding, it can be used directly.

class App extends {
    state={
        count:0, 
    }
    add=()=>{
        ({
            count:+1
        })
    }
    render(){
        // This in the arrow function points to the external Han Jing, here it points to the render() method        return (
            <div>
                <span>total：{}</span>
                <button onClick={}>Click+1</button>
            </div>
        )
    }
}
(<App/>,('root'));

Summarize

That’s all for this article. I hope it can help you, and I hope you can pay more attention to more of my content!