react如何獲取state的值并更新使用
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") { ?//商戶信息 ? ? ? ? ? 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)組件,類組件又叫做 有狀態(tài)組件
- 狀態(tài)( state )即 數(shù)據(jù)
- 函數(shù)組件沒(méi)有自己的狀態(tài),只負(fù)責(zé)數(shù)據(jù)展示(靜)
- 類組件有自己的狀態(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ì)顯得非常混亂
- 推薦:將邏輯抽離到單獨(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è)參考,也希望大家多多支持腳本之家。
- React?中state與props更新深入解析
- React18?useState何時(shí)執(zhí)行更新及微任務(wù)理解
- 關(guān)于react useState更新異步問(wèn)題
- React Hook中useState更新延遲問(wèn)題及解決
- 解決react中useState狀態(tài)異步更新的問(wèn)題
- ReactHooks批量更新state及獲取路由參數(shù)示例解析
- react純函數(shù)組件setState更新頁(yè)面不刷新的解決
- 詳解React setState數(shù)據(jù)更新機(jī)制
- React?18?如何更新?state?中的對(duì)象
相關(guān)文章
TS裝飾器bindThis優(yōu)雅實(shí)現(xiàn)React類組件中this綁定
這篇文章主要為大家介紹了TS裝飾器bindThis優(yōu)雅實(shí)現(xiàn)React類組件中this綁定,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11react項(xiàng)目中redux的調(diào)試工具不起作用的解決
這篇文章主要介紹了react項(xiàng)目中redux的調(diào)試工具不起作用的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01react-redux的connect與React.forwardRef結(jié)合ref失效的解決
這篇文章主要介紹了react-redux的connect與React.forwardRef結(jié)合ref失效的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05六分鐘帶你快速學(xué)會(huì)react中的useMemo
簡(jiǎn)單說(shuō)React.memo()是通過(guò)校驗(yàn)props中的數(shù)據(jù)是否改變的來(lái)決定組件是否需要重新渲染的一種緩存技術(shù),下面這篇文章主要給大家介紹了關(guān)于如何快速學(xué)會(huì)react中useMemo的相關(guān)資料,需要的朋友可以參考下2022-12-12ReactJS?應(yīng)用兼容ios9對(duì)標(biāo)ie11解決方案
這篇文章主要為大家介紹了ReactJS?應(yīng)用兼容ios9對(duì)標(biāo)ie11解決方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01React使用useEffect解決setState副作用詳解
這篇文章主要為大家介紹了React使用useEffect解決setState副作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10React Native基礎(chǔ)入門(mén)之調(diào)試React Native應(yīng)用的一小步
這篇文章主要給大家介紹了關(guān)于React Native基礎(chǔ)入門(mén)之調(diào)試React Native應(yīng)用的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07