日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網(wǎng)站首頁 編程語言 正文

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

作者：馬優(yōu)晨 ? 更新時間： 2022-10-02 編程語言

react獲取state值并更新使用

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

在視圖層處理

//在 state 中飯設置初始值
state={
? ? ? name:'',
? ? ? age:''
?}
//通過 控制一個事件觸發(fā)然后setState 去設置
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)，只負責數(shù)據(jù)展示(靜)
  • 類組件有自己的狀態(tài)，負責更新Ul，讓頁面“動”起來

比如計數(shù)器案例中，點擊按鈕讓數(shù)值加1。0和1就是不同時刻的狀態(tài)，而由0變?yōu)?就表示狀態(tài)發(fā)生了變化。狀態(tài)變化后，UI也要相應的更新。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ù)驅動視圖

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邏輯代碼，會顯得非常混亂
  • 推薦：將邏輯抽離到單獨的方法中，保證JSX結構清晰

  • 原因：事件處理程序中 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"))

原文鏈接：https://mayouchen.blog.csdn.net/article/details/80801802

欄目分類
最近更新