react state状态的使用

import ReactDOM from 'react-dom/client';
import React, { Component } from 'react'


export default class Ikun extends Component {

    constructor(props) {
        super(props);
        this.state = {
            cuount: 0
        }
    }

    render() {
        return (
            <div>
                <button onClick={() => this.click()}>点击</button>{this.state.cuount}
            </div>
        )
    }

    click = () => {
        this.setState({
            cuount: this.state.cuount + 1
        }, () => {
            console.log("放在回调中：" + this.state.cuount)
        })

        console.log("放在外部同步执行1：" + this.state.cuount)

        this.setState({
            cuount: this.state.cuount + 1
        })
        console.log("放在外部同步执行2：" + this.state.cuount)

        this.setState({
            cuount: this.state.cuount + 1
        })
        console.log("放在外部同步执行3：" + this.state.cuount)

    }

}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Ikun />
);

 

需要注意的是this.setState()是异步的，而且同时有多个setState同步执行则会进行合并。如果需要获取更新后的实时数据，需要在this.setState()的第二个参数里的回调函数获取