react 是單向數據流，若想要改變已有組件的外觀，我們只能通過更改組件的 props 或者更新組件的 state。在 react 項目的代碼中我們操作最多的就是 this.setState 方法。下面對 setState 方法進行詳細的說明。

<!--more -->

setState要點：react 框架為了提高性能，會對 state 的更新進行收集、合并、再進行一次批量的狀態更新。這種機制常常導致一些意想不到的情況。

setState 有兩種調用形式：

向 setState 傳遞對象
setState()并不會立即觸發 state 的更新。

//this.state.demo = 1;handleClick = () => {  this.setState({demo: 2});  console.log(this.state.demo);// 1}

1、🔔注意：在 addEventListener、setTimeout、ajax 回調中 this.setState 是立即觸發的。

2、setState 會合并更新，可能會造成狀態更新的丟失

handleClick = () => {  this.setState({demo: this.state.demo + 1});  this.setState({demo: this.state.demo + 1});}//click 之后 demo 為2而不是3

綜上：在同一代碼塊中不要多次調用 this.setState 方法

react 的 setState 還提供了另一種調用形式： this.setState(callbackFunc)

this.setState((previousState, currentProps) => {  return { ...previousState, foo: currentProps.bar };});

該語法和直接為 setState 傳遞對象不同,不會合并更新。

// demo + 1handleSyncStateChange = () => {  this.setState({    demo: this.state.demo + 1  });  this.setState({    demo: this.state.demo + 1  });}// demo + 2handleAsyncStateChange = () => {  this.setState((preState, preProps) => {    return {      demo: preState.demo + 1    }  });  this.setState((preState, preProps) => {    return {      demo: preState.demo + 1    }  });}

refs

Async Nature Of setState

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。