state

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

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

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

setState有兩種格式

• 傳一個對象

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

this.setState({})

• 傳一個函數(shù)

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

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

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

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

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

總結(jié)

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

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