React 組件中的state和setState()你知道多少

更新時(shí)間：2022年03月18日 14:54:01 作者：cs_upupo

這篇文章主要為大家詳細(xì)介紹了React組件中的state和setState()，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

state的基本使用

狀態(tài)（state）即數(shù)據(jù)，是組件內(nèi)部的私有數(shù)據(jù)，只能在組件內(nèi)部使用

state的值是對(duì)象，可以通過(guò)this.state來(lái)獲取狀態(tài)。

setState()修改狀態(tài)

狀態(tài)是可變的，可以通過(guò)this.setState({要修改的數(shù)據(jù)})來(lái)改變狀態(tài)

注意：跟vue語(yǔ)法不同，不要直接修改state中的值，這時(shí)錯(cuò)誤的！

//正確
 this.setState({
     count:this.state.count+1
 })
//錯(cuò)誤
this.state.count+=1

最后結(jié)合以上內(nèi)容，寫了一個(gè)簡(jiǎn)單的累加器,但是在此之前，我們需要解決this在自定義的方法中的指向問(wèn)題，否則this指向會(huì)為undefined，我們一般希望this指向組件實(shí)例。

解決方法：

1.箭頭函數(shù)

利用箭頭函數(shù)自身不綁定this的特點(diǎn)

class App extends React.Component{
    state={
       count:0, 
    }
    render(){
        // 箭頭函數(shù)中的this指向外部韓靜，此處指向render()方法
        return (
            <div>
                <span>總數(shù)：{this.state.count}</span>
                <button onClick={()=>{
                    this.setState({
                        count:this.state.count+1
                    })
                }}>點(diǎn)擊+1</button>
            </div>
        )
    }
}
ReactDOM.render(<App/>,document.getElementById('root'));

但是這種方法會(huì)導(dǎo)致JSX語(yǔ)法中代碼過(guò)于繁雜，不利于表明項(xiàng)目結(jié)構(gòu)，一般不推薦使用。

2.Function.prototype.bind()

利用ES5中的bind方法，將事件處理程序中的this與組件示例綁定到一起

class App extends React.Component{
    constructor(){
        super()//super()必須寫，這時(shí)ES6語(yǔ)法中class的一個(gè)要求
        //此時(shí)可將state放到constructor()中
        this.state={
            count:0, 
         }
        this.add=this.add.bind(this)//將this指向綁定到實(shí)例
    }
    //事件處理程序
    add(){
        this.setState({
            count:this.state.count+1
        })
    }
    render(){
        // 箭頭函數(shù)中的this指向外部韓靜，此處指向render()方法
        return (
            <div>
                <span>總數(shù)：{this.state.count}</span>
                <button onClick={this.add}>點(diǎn)擊+1</button>
            </div>
        )
    }
}
ReactDOM.render(<App/>,document.getElementById('root'));

3.class的示例方法

利用箭頭函數(shù)形式的class實(shí)例方法，此方法比較簡(jiǎn)潔，強(qiáng)烈推薦

注意：該語(yǔ)法是實(shí)驗(yàn)性語(yǔ)法，但是由于腳手架中babel的存在，可以直接使用

class App extends React.Component{
    state={
        count:0, 
    }
    add=()=>{
        this.setState({
            count:this.state.count+1
        })
    }
    render(){
        // 箭頭函數(shù)中的this指向外部韓靜，此處指向render()方法
        return (
            <div>
                <span>總數(shù)：{this.state.count}</span>
                <button onClick={this.add}>點(diǎn)擊+1</button>
            </div>
        )
    }
}
ReactDOM.render(<App/>,document.getElementById('root'));