在Reactjs中設置狀態變量的正確方法是什么？這些方法之間有什么區別？

Question

我正在使用React JS，我想知道兩次調用setState()來設置兩個不同的狀態變量之間的區別是這樣的：

this.setState({fruit1: “apple”});
this.setState({fruit2: “mango”});

和

一次調用setState()並將兩個狀態變量作為JSON傳遞，如下所示：

this.setState({fruit1: “apple”, fruit2: “mango”});

還有什么更好的做法：將狀態變量名稱放在雙引號中，例如： this.setState({"fruit1": “apple”})還是直接忽略引號？

Answer 1

從React文檔中 ：

切勿直接更改this.state，因為之后調用setState（）可能會替換您所做的更改。 將this.state視為不可變的。 setState（）不會立即使this.state發生突變，但會創建一個掛起的狀態轉換。 調用此方法后訪問this.state可能會返回現有值。 無法保證對setState的調用的同步操作，並且可能會為提高性能而批量調用。 除非在shouldComponentUpdate（）中實現了條件渲染邏輯，否則setState（）將始終觸發重新渲染。 如果正在使用可變對象，並且邏輯不能在shouldComponentUpdate（）中實現，則僅當新狀態不同於先前狀態時才調用setState（）可以避免不必要的重新渲染。

因此，使用this.setState({fruit1: “apple”, fruit2: “mango”});

對於第二個問題，您可以在這里和這里查看

Answer 2

在React事件處理程序中（即從基於React的onChange={...}屬性等調用的函數）中，對setState多次調用被批處理，並且組件僅一次被重新呈現。 所以，兩者之間沒有區別

handleClick: function() {
  this.setState({fruit1: "apple"});
  this.setState({fruit2: "mango"});
}

和

handleClick: function() {
  this.setState({fruit1: "apple", fruit2: "mango"});
}

但是， 在 React事件系統之外，對setState的兩個調用將不會合並，除非您將它們包裝在傳遞給React.addons.batchedUpdates的函數中。 這通常不必擔心，但是如果您開始設置狀態以響應異步事件（例如計時器，promise，回調等），則可能會成為問題。 因此，我通常會推薦第二種形式（兩個對象合並為一個）。

Answer 3

這是對React States和setState（）方法的詳細說明。

狀態（和道具）只是React重新渲染/重新計算DOM的兩個原因。 這意味着，如果我們更改狀態，就會告訴我們要更改應用程序的相關行為。

State是具有key：value對的Java Script對象。 現在我們可能有很多狀態（許多鍵：值對），並且在某些時候，只有一種狀態在變化。 在這種情況下，我們可以使用this.setState（）方法僅更改該特定狀態。

state = { fruit1: 'mango', fruit2: 'apple' }

假設我們要更新fruit1：“西瓜”。

在這里我們可以說：

this.setState( {fruit1: 'watermelon'} ); 

在這里，我們沒有對第二狀態（fruit2）進行任何說明，因此react會將更改后的狀態（fruit1）與舊狀態（fruit2）合並。

同時，我們也可以說：

this.setState( {fruit1: 'watermelon' ,fruit2:'apple'} ); 

但這不是必需的。

正確和命令的設置/更改狀態的方式：

來自React官方文檔：

將setState（）視為請求而不是立即更新組件的命令。 為了獲得更好的感知性能，React可能會延遲它，然后在一次通過中更新幾個組件。 React不保證狀態更改會立即應用。

因此，這是一種更好的方法：如果我們要更新計數器或計算某些內容：

this.setState((prevState,props) => {
 return {
           { counter: prevState.counter+1; }
        }