快捷導(dǎo)航

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

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

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

react獲取state值并更新使用

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

在視圖層處理

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

在model層處理

view層

? //前端通過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") { ?//商戶信息
? ? ? ? ? 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)組件和無狀態(tài)組件

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

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

state的基本使用

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

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

setState修改狀態(tài)

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

class App extends React.Component {
    // 簡化語法初始化state  【推薦】
    state = {
        count: 0,
    }
    render() {
        return(
            <div>
                <h1>計數(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中摻雜過多JS邏輯代碼，會顯得非?；靵y
推薦：將邏輯抽離到單獨的方法中，保證JSX結(jié)構(gòu)清晰

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

事件綁定this指向

1. 箭頭函數(shù)

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

2. Function.prototype.bind()

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

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>計數(shù)器：{this.state.count}</h1>
                <button onClick = { this.onIncrement }>+1</button>
            </div>
        )
    }
}
// 渲染組件
ReactDOM.render(<App />, document.getElementById("root"))

3. class的實例方法

利用箭頭函數(shù) 形式的 class實例方法
注意∶該語法是實驗性語法，但是，由于 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>計數(shù)器：{this.state.count}</h1>
                <button onClick = { this.onIncrement }>+1</button>
            </div>
        )
    }
}
// 渲染組件
ReactDOM.render(<App />, document.getElementById("root"))

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

您可能感興趣的文章: