React----setState（）的说明

最新推荐文章于 2024-11-02 15:48:17 发布

像费曼%

最新推荐文章于 2024-11-02 15:48:17 发布

阅读量145

点赞数

分类专栏： React 文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_53052268/article/details/126138844

版权

React 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文介绍了React中setState的异步更新特性，强调了不应依赖先前的setState调用来设置状态，并展示了推荐的更新状态语法，即使用箭头函数。同时，解释了setState的第二个参数，用于在状态更新并完成渲染后执行回调函数，提供了代码示例来说明这些概念。

摘要由CSDN通过智能技术生成

1.更新数据

setState（）是异步更新数据的
注意：使用该语法时，后面的setState（）不要依赖于前面的setState（）
可以多次调用setState（），只会触发一次重新渲染

class App extends React.Component{
    state = {
        count:0
    }
    handleClick = ()=>{
        //异步更新数据
        this.setState({
            count:this.state.count+1
        })
        
        this.setState({
            count:this.state.count+1
        })

        console.log('count:',this.state.count)
    }
    render(){
        return(
            <div>
                <h1>计数器：{this.state.count}</h1>
                <button onClick={this.handleClick}>+1</button>
            </div>
        )
    }
}


ReactDOM.render(<App/>,

document.getElementById('root'))

2.1推荐语法

推荐：使用setState（（state，props）=>{}）
参数state：表示最新的state
参数props：表示最新的props

class App extends React.Component{
    state = {
        count:0
    }
    handleClick = ()=>{
        // 异步更新数据
        
        
        this.setState((state,props)=>{
            return{
                count:state.count+1
            }
        })

        this.setState((state,props)=>{//得到最新的state，即上一次的state
            console.log('第二次调用：',state)
            return{
                count:state.count+1
            }
        })
    
        console.log('count:',this.state.count)
    }
    render(){
        return(
            <div>
                <h1 id='title'>计数器：{this.state.count}</h1>
                <button onClick={this.handleClick}>+1</button>
            </div>
        )
    }
}


ReactDOM.render(<App/>,

document.getElementById('root'))

2.2第二个参数

场景：在状态更新（页面完成重新渲染）后立即执行某个操作

语法：setState（update，[callback]）

class App extends React.Component{
    state = {
        count:0
    }
    handleClick = ()=>{
        // 异步更新数据
        
        
        this.setState((state,props)=>{
            return{
                count:state.count+1
            }}, ()=>{
                console.log('这个回调函数会在状态更新后立即执行')
                console.log('状态更新:',this.state.count)
                console.log(document.getElementById('title').innerHTML)
            }
        )
        console.log('count:',this.state.count)
    }


    render(){
        return(
            <div>
                <h1 id='title'>计数器：{this.state.count}</h1>
                <button onClick={this.handleClick}>+1</button>
            </div>
        )
    }
}


ReactDOM.render(<App/>,

document.getElementById('root'))