快捷導(dǎo)航

react如何獲取state的值并更新使用

更新時(shí)間：2022年08月08日 10:13:15 作者：馬優(yōu)晨

這篇文章主要介紹了react如何獲取state的值并更新使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

react獲取state值并更新使用

react獲取state的值并且修改分為兩種情況：

在視圖層處理

//在 state 中飯?jiān)O(shè)置初始值
state={
? ? ? name:'',
? ? ? age:''
?}
//通過(guò) 控制一個(gè)事件觸發(fā)然后setState 去設(shè)置
setName=()=>{
? ? this.setState({
? ? ? ?name
? ? })
}

在model層處理

view層

? //前端通過(guò)dispatch 去調(diào)用changeTab 接口
? onTabsChange = (key) => { ?
? ? this.props.dispatch({
? ? ? type: `${this.module}/changeTab`, ?
? ? ? payload: key
? ? });
? }

model層：

const moduleName = 'mayouchen';
let defaultState = {
? activeTabKey: "1"
};
export default {
? namespace: moduleName,
? state: {
? ? moduleName: moduleName,
? ? defaultState,
? ? ...defaultState
},
effects: {
?* changeTab({ payload, }, { call, put, select }) { ?
? ? ? ?// 更新 ?activeTabKey ?
? ? ? ?yield put({
? ? ? ? ?type:'updateActiveTabKey',
? ? ? ? ?payload
? ? ? ?});?
? ? ? // 更新完 ?activeTabKey ?就可以使用 ?activeTabKey 更新后的值
? ? ? ?yield put({type: 'getDataByTab'});
?},
? * getDataByTab({payload }, { call, put, select }) {?
? ? ? ? let { activeTabKey } = yield select(state => state[moduleName]);
? ? ? ? //切換TAB調(diào)用不同接口
? ? ? ? if(activeTabKey == "1") { ?//商戶(hù)信息
? ? ? ? ? yield put({type:'businessInformation', payload: {}});
? ? ? ? } else if (activeTabKey == "2" ) { ?//審批信息
? ? ? ? ? yield put({type:'approvalInformation', payload: {}})
? ? ? ? }else if (activeTabKey == "3" ) {
? ? ? ? }
? ? },?
? ?* businessInformation ({payload, }, { call, put, select }) {
? ? ?const result = yield call(read, payload);
? ? ?if (result ) {
? ? ? ?let { data } = result ;
? ? ? ?yield put({ type: 'getBusinessInformationData', payload: {...data }});
? ? ?}
? ? ?else {
? ? ? ?message.error(`獲取信息失?。?{entityRes.globalError}`);
? ? ?}
? }
}
?reducers: {
? ? ?updateActiveTabKey(state, action) {
? ? ? return {
? ? ? ? ...state,
? ? ? ? activeTabKey: action.payload
? ? ? };
? ? }
}

react中state基本使用

有狀態(tài)組件和無(wú)狀態(tài)組件

函數(shù)組件又叫做無(wú)狀態(tài)組件，類(lèi)組件又叫做有狀態(tài)組件
狀態(tài)( state )即數(shù)據(jù)
函數(shù)組件沒(méi)有自己的狀態(tài)，只負(fù)責(zé)數(shù)據(jù)展示(靜)
類(lèi)組件有自己的狀態(tài)，負(fù)責(zé)更新Ul，讓頁(yè)面“動(dòng)”起來(lái)

比如計(jì)數(shù)器案例中，點(diǎn)擊按鈕讓數(shù)值加1。0和1就是不同時(shí)刻的狀態(tài)，而由0變?yōu)?就表示狀態(tài)發(fā)生了變化。狀態(tài)變化后，UI也要相應(yīng)的更新。React中想要實(shí)現(xiàn)該功能，就要使用有狀態(tài)組件來(lái)完成。

state的基本使用

狀態(tài)( state )即數(shù)據(jù)，是組件內(nèi)部的私有數(shù)據(jù)，只能在組件內(nèi)部使用
state的值是對(duì)象，表示一個(gè)組件中可以有多個(gè)數(shù)據(jù)
通過(guò) this.state 來(lái)獲取狀態(tài)

class App extends React.Component {
    // constructor() {
    //     super()
    //     // 初始化state
    //     this.state = {
    //         count: 0
    //     }
    // }
    // 簡(jiǎn)化語(yǔ)法初始化state  【推薦】
    state = {
        count: 0,
    }
    render() {
        return(
            <div>
                <h1>計(jì)數(shù)器：{this.state.count}</h1>
            </div>
        )
    }
}
// 渲染組件
ReactDOM.render(<App />, document.getElementById("root"))

setState修改狀態(tài)

狀態(tài)是可變的
語(yǔ)法：this.setState({ 要修改的數(shù)據(jù) })
注意：不要直接修改 state 中的值，這是錯(cuò)誤的?。?！
setState() 作用：1. 修改state 2. 更新UI
思想：數(shù)據(jù)驅(qū)動(dòng)視圖

class App extends React.Component {
    // 簡(jiǎn)化語(yǔ)法初始化state  【推薦】
    state = {
        count: 0,
    }
    render() {
        return(
            <div>
                <h1>計(jì)數(shù)器：{this.state.count}</h1>
                <button onClick = {() => {
                    this.setState({
                        count: this.state.count + 1
                    })
                }}>+1</button>
            </div>
        )
    }
}
// 渲染組件
ReactDOM.render(<App />, document.getElementById("root"))

從JSX中抽離事件處理程序

JSX中摻雜過(guò)多JS邏輯代碼，會(huì)顯得非?；靵y
推薦：將邏輯抽離到單獨(dú)的方法中，保證JSX結(jié)構(gòu)清晰

原因：事件處理程序中 this的值為undefined
希望：this 指向組件實(shí)例( render方法中的this即為組件實(shí)例)

事件綁定this指向

1. 箭頭函數(shù)

利用箭頭函數(shù)自身不綁定 this 的特點(diǎn)
render() 方法中的 this 為組件實(shí)例，可以獲取到 setState()

2. Function.prototype.bind()

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

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            count: 0,
        }
        this.onIncrement = this.onIncrement.bind(this)
    }
    // 事件處理程序
    onIncrement() {
        console.log('事件處理程序中的this：', this)
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        return(
            <div>
                <h1>計(jì)數(shù)器：{this.state.count}</h1>
                <button onClick = { this.onIncrement }>+1</button>
            </div>
        )
    }
}
// 渲染組件
ReactDOM.render(<App />, document.getElementById("root"))

3. class的實(shí)例方法

利用箭頭函數(shù) 形式的 class實(shí)例方法
注意∶該語(yǔ)法是實(shí)驗(yàn)性語(yǔ)法，但是，由于 babel 的存在可以直接使用

class App extends React.Component {
    state = {
        count: 0,
    }
        
    // 事件處理程序
    onIncrement = ()=> {
        console.log('事件處理程序中的this：', this)
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        return(
            <div>
                <h1>計(jì)數(shù)器：{this.state.count}</h1>
                <button onClick = { this.onIncrement }>+1</button>
            </div>
        )
    }
}
// 渲染組件
ReactDOM.render(<App />, document.getElementById("root"))

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: