React設(shè)計(jì)setState方法就是為了重新渲染頁面

看看下面的代碼實(shí)現(xiàn)的結(jié)果：

state = {value ： 0 }function test() {this.setState({ value: this.state.value + 1 });this.setState({ value: this.state.value + 1 });this.setState({ value: this.state.value + 1 }); }test() //發(fā)現(xiàn)最后value 是1，只加了一次function test1() {this.setState((state, props) => ({ value: state.value + 1 }));this.setState((state, props) => ({ value: state.value + 1 }));this.setState((state, props) => ({ value: state.value + 1 })); }test1() // 發(fā)現(xiàn)最后value 是3, 結(jié)果就如我們所意了

因?yàn)槭褂煤瘮?shù)式setState，React會(huì)保證每次調(diào)用函數(shù)時(shí)，state都已經(jīng)合并了之前的狀態(tài)修改結(jié)果。

---

多次setState會(huì)合并

前面我們了解到setState并不會(huì)立即改變state的值，而是將其放到一個(gè)任務(wù)隊(duì)列里，最終將多個(gè)setState合并，一次性更新頁面。所以我們可以在代碼里多次調(diào)用setState，每次只需要關(guān)注當(dāng)前修改的字段即可。

多次setState會(huì)合并為什么會(huì)合并

主要是setState觸發(fā)頁面重新渲染， 需要經(jīng)過以下生命周期：

• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

經(jīng)過測(cè)試，其實(shí)state的值只有在render的時(shí)候才真正被修改了

// shouldComponentUpdate: 0// componentWillUpdate: 0// render: 1// componentDidUpdate: 1// shouldComponentUpdate: 1// componentWillUpdate: 1// render: 2// componentDidUpdate: 2// shouldComponentUpdate: 2// componentWillUpdate: 2// render: 3// componentDidUpdate: 3

總結(jié)

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

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