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),只負責(zé)數(shù)據(jù)展示(靜)
- 類組件有自己的狀態(tài),負責(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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
TS裝飾器bindThis優(yōu)雅實現(xiàn)React類組件中this綁定
這篇文章主要為大家介紹了TS裝飾器bindThis優(yōu)雅實現(xiàn)React類組件中this綁定,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11react項目中redux的調(diào)試工具不起作用的解決
這篇文章主要介紹了react項目中redux的調(diào)試工具不起作用的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01react-redux的connect與React.forwardRef結(jié)合ref失效的解決
這篇文章主要介紹了react-redux的connect與React.forwardRef結(jié)合ref失效的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05ReactJS?應(yīng)用兼容ios9對標(biāo)ie11解決方案
這篇文章主要為大家介紹了ReactJS?應(yīng)用兼容ios9對標(biāo)ie11解決方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-01-01React使用useEffect解決setState副作用詳解
這篇文章主要為大家介紹了React使用useEffect解決setState副作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10React Native基礎(chǔ)入門之調(diào)試React Native應(yīng)用的一小步
這篇文章主要給大家介紹了關(guān)于React Native基礎(chǔ)入門之調(diào)試React Native應(yīng)用的相關(guān)資料,文中通過圖文介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07