React組件中的state和setState如何使用

本篇內容主要講解“React組件中的state和setState如何使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“React組件中的state和setState如何使用”吧!

state的基本使用

狀態（state）即數據，是組件內部的私有數據，只能在組件內部使用

state的值是對象，可以通過this.state來獲取狀態。

setState()修改狀態

狀態是可變的，可以通過this.setState({要修改的數據})來改變狀態

注意：跟vue語法不同，不要直接修改state中的值，這時錯誤的！

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

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

解決方法：

1.箭頭函數

 利用箭頭函數自身不綁定this的特點

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

但是這種方法會導致JSX語法中代碼過于繁雜，不利于表明項目結構，一般不推薦使用。

2.Function.prototype.bind()

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

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

3.class的示例方法

利用箭頭函數形式的class實例方法，此方法比較簡潔，強烈推薦

注意：該語法是實驗性語法，但是由于腳手架中babel的存在，可以直接使用

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

到此，相信大家對“React組件中的state和setState如何使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！