快捷導(dǎo)航

React中setState更新?tīng)顟B(tài)的兩種寫(xiě)法

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

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

React 中 setState 更新?tīng)顟B(tài)的兩種寫(xiě)法

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

1. 對(duì)象式寫(xiě)法

對(duì)象式寫(xiě)法是最常見(jiàn)的 setState 方法的調(diào)用方式之一。在這種寫(xiě)法中，我們直接傳入一個(gè)對(duì)象來(lái)更新?tīng)顟B(tài)。

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

2. 函數(shù)式寫(xiě)法

函數(shù)式寫(xiě)法是另一種更推薦的 setState 方法的調(diào)用方式。在這種寫(xiě)法中，我們傳入一個(gè)函數(shù)作為參數(shù)，函數(shù)接收前一個(gè)狀態(tài)作為參數(shù)，返回一個(gè)對(duì)象用于更新?tīng)顟B(tài)。

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

區(qū)別和使用場(chǎng)景

對(duì)象式寫(xiě)法直接傳入一個(gè)對(duì)象，不受到前一個(gè)狀態(tài)的影響，適用于不依賴于前一個(gè)狀態(tài)的簡(jiǎn)單狀態(tài)更新。
函數(shù)式寫(xiě)法通常在我們需要依賴于前一個(gè)狀態(tài)的情況下使用，因?yàn)樗梢源_保我們得到的是最新的狀態(tài)值。這種寫(xiě)法適用于需要在一次更新中使用前一個(gè)狀態(tài)多次，或者需要根據(jù)前一個(gè)狀態(tài)計(jì)算新?tīng)顟B(tài)的復(fù)雜邏輯。因?yàn)樵诤瘮?shù)式寫(xiě)法中，React 會(huì)確保在調(diào)用函數(shù)時(shí)傳遞給我們最新的狀態(tài)值，從而避免了因?yàn)楫惒礁聦?dǎo)致的狀態(tài)不一致的問(wèn)題。