React設計setState方法就是為了重新渲染頁面

看看下面的代碼實現的結果：

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() //發現最后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() // 發現最后value 是3, 結果就如我們所意了

因為使用函數式setState，React會保證每次調用函數時，state都已經合并了之前的狀態修改結果。

---

多次setState會合并

前面我們了解到setState并不會立即改變state的值，而是將其放到一個任務隊列里，最終將多個setState合并，一次性更新頁面。所以我們可以在代碼里多次調用setState，每次只需要關注當前修改的字段即可。

多次setState會合并為什么會合并

主要是setState觸發頁面重新渲染， 需要經過以下生命周期：

• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

經過測試，其實state的值只有在render的時候才真正被修改了

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。