React中setState更新狀態(tài)的兩種寫法

更新時間：2024年03月24日 09:58:18 作者：JudithHuang

在?React?中,我們經(jīng)常需要更新組件的狀態(tài)（state）,使用?setState?方法是一種常見的方式來實現(xiàn)狀態(tài)的更新,而在使用?setState?方法時,有兩種不同的寫法,即對象式和函數(shù)式,本文將介紹這兩種寫法的區(qū)別和使用場景,需要的朋友可以參考下

React 中 setState 更新狀態(tài)的兩種寫法

在 React 中，我們經(jīng)常需要更新組件的狀態(tài)（state）。使用 setState 方法是一種常見的方式來實現(xiàn)狀態(tài)的更新，而在使用 setState 方法時，有兩種不同的寫法，即對象式和函數(shù)式。本文將介紹這兩種寫法的區(qū)別和使用場景。

1. 對象式寫法

對象式寫法是最常見的 setState 方法的調用方式之一。在這種寫法中，我們直接傳入一個對象來更新狀態(tài)。

// 對象式寫法
this.setState({ count: this.state.count + 1 }, () => {
  // 在更新完state、執(zhí)行完render之后執(zhí)行
  console.log('新的state值', this.state.count);
});

2. 函數(shù)式寫法

函數(shù)式寫法是另一種更推薦的 setState 方法的調用方式。在這種寫法中，我們傳入一個函數(shù)作為參數(shù)，函數(shù)接收前一個狀態(tài)作為參數(shù)，返回一個對象用于更新狀態(tài)。

// 函數(shù)式寫法
this.setState(state => ({ count: state.count + 1 }), () => {
  console.log('新的state值', this.state.count);
});

區(qū)別和使用場景

對象式寫法直接傳入一個對象，不受到前一個狀態(tài)的影響，適用于不依賴于前一個狀態(tài)的簡單狀態(tài)更新。
函數(shù)式寫法通常在我們需要依賴于前一個狀態(tài)的情況下使用，因為它可以確保我們得到的是最新的狀態(tài)值。這種寫法適用于需要在一次更新中使用前一個狀態(tài)多次，或者需要根據(jù)前一個狀態(tài)計算新狀態(tài)的復雜邏輯。因為在函數(shù)式寫法中，React 會確保在調用函數(shù)時傳遞給我們最新的狀態(tài)值，從而避免了因為異步更新導致的狀態(tài)不一致的問題。