腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開(kāi)發(fā)工具 python Photoshop 必備軟件

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)容，寫(xiě)了一個(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()必須寫(xiě)，這時(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'));