不要直接修改 State

state數(shù)據(jù)不能直接修改，必須要通過(guò)setState來(lái)修改。但是設(shè)置值的時(shí)候不能影響到之前state的值，舉個(gè)栗子：

// 處理數(shù)組，不會(huì)改變?cè)袛?shù)組 this.setState({list1: this.state.list1.concat(100), // 追加list2: [...this.state.list2, 100], // 追加list3: this.state.list3.slice(0, 3), // 截取list4: this.state.list4.filter(item => item > 100), // 篩選// 其他操作，要先用比如const list5Copy = this.state.list5.slice()生成一個(gè)副本，然后再對(duì)副本做操作list5: list5Copy })// 處理對(duì)象，不會(huì)改變?cè)袑?duì)象 this.setState({obj1: Object.assign({}, this.state.obj1, {a: 100}),obj2: {...this.state.obj2, a: 100} })

處理數(shù)組時(shí)不要使用push pop splice等方式，處理對(duì)象時(shí)不要直接對(duì)this.state.obj進(jìn)行屬性設(shè)置，因?yàn)檫@樣違反不要直接修改state原則。

setState更新可能是同步也可能是異步

出于性能考慮，React 可能會(huì)把多個(gè) setState() 調(diào)用合并成一個(gè)調(diào)用。比如如下情況：

// 傳入對(duì)象，會(huì)被合并。雖然3次setState, 但count值最后只會(huì)加1 this.setState({counter: this.state.counter + 1 }) this.setState({counter: this.state.counter + 1 }) this.setState({counter: this.state.counter + 1 })

此時(shí)this.state的更新就是異步更新了。那么有沒(méi)有辦法控制讓其同步更新呢？要解決這個(gè)問(wèn)題，可以讓 setState() 接收一個(gè)函數(shù)而不是一個(gè)對(duì)象。這個(gè)函數(shù)用上一個(gè) state 作為第一個(gè)參數(shù)，將此次更新被應(yīng)用時(shí)的 props 做為第二個(gè)參數(shù)：

// 大括號(hào)包裹的箭頭函數(shù)寫(xiě)return this.setState((preState, props) => {return {counter: preState.counter + 1} }) // 小括號(hào)包裹的箭頭函數(shù)不用寫(xiě)return this.setState((preState, props) => ({counter: preState.counter + 1 })) // 普通函數(shù)形式 this.setState(function(preState, props) {return {counter: preState.counter + 1} })

這樣的話，this.state就可以保持同步更能，最后顯示的counter值是3而不是1了。

State 的更新會(huì)被合并

在講setState更新可能是同步也可能是異步的時(shí)候已經(jīng)講啦。

參考資料

[1] 正確地使用 State

總結(jié)

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

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