state

理解：state是組件對(duì)象最重要的屬性，值是對(duì)象(可以包含多個(gè)key—value組合)

state中的值可以修改，修改的唯一方法是調(diào)用this.setState,每次修改以后，自動(dòng)調(diào)用 this.render 方法，再次渲染組件。（也就是說(shuō)直接this.state.num=2這樣直接修改值是無(wú)效的）
state在組件的構(gòu)造函數(shù)中賦值

class View extends Component{constructor(){super();this.state={num:10}}//state={num:10} 直接做為實(shí)例屬性也可以}

setState有兩種格式

• 傳一個(gè)對(duì)象

直接修改state的值
因?yàn)?this.props 和 this.state 可能會(huì)異步更新，所以不能依賴(lài)他們的值來(lái)更新下一個(gè)狀態(tài)。解決辦法讓 setState() 接收一個(gè)函數(shù)

this.setState({})

• 傳一個(gè)函數(shù)

接收兩個(gè)參數(shù)preState,props
更新前的state，更新后的props

修改state自身的值(例：state.num+4)

// 傳函數(shù)的兩種寫(xiě)法 // 普通函數(shù)this.setState(function(state,props){return {num:state.num--}}) // 箭頭函數(shù)this.setState((state,props)=>({num:state.num}))

遍歷state的值，循環(huán)渲染頁(yè)面

list(){return this.state.lists.map((v,i)=>(<li key={i}>{v}</li>)) } //直接在dom中渲染即可(因?yàn)閞ender會(huì)執(zhí)行兩次,所以要進(jìn)行簡(jiǎn)單的處理) <ul>{this.state.lists.length!==0:this.list():'';}</ul>

總結(jié)

以上是生活随笔為你收集整理的react中的state详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。