理解 React useState() 鈎子

Question

我正在使用useState()鈎子處理功能性 React 組件。 我對這個鈎子的使用方式或背后的設計決策有點困惑。

我做了一個codepen示例來說明我的問題：

https://codepen.io/svenvandescheur/pen/ewwBwR

基於類的組件

在基於類的組件中， this.setState({foo: 'bar'})僅使用傳遞給第一個參數的對象中的鍵來更新狀態。 如果狀態已經包含不同的值，則將它們留在原處。

功能組件

我錯誤地認為useState()提供的setState()的語法和行為與Component提供的對應物非常相似。 但是，我注意到setState({foo: 'bar'})將替換整個狀態，刪除未傳遞的鍵。

這個問題可以通過在每次調用setState()使用擴展運算符傳遞整個狀態來解決，然后添加更改，如下所示： setState({...state, foo: 'bar'}) 。

這感覺非常重復，在我的現實世界場景中，甚至導致了新狀態被舊狀態覆蓋的錯誤。

我的問題是，是否我的理解useState()從兩個Component為useState()正確，為什么選擇這種行為。 目前在 React 中處理狀態的首選方式是什么？

Answer 1

你的理解是正確的。 setState會將當前狀態和新狀態合並在一起以創建一個新狀態。 useState將采用給定值並替換舊狀態。

這種行為可能看起來不直觀，但允許將原始值用作狀態，例如字符串、數字和布爾值。

如果您需要更多狀態，您可以簡單地添加更多useState 。 如果你的狀態更新邏輯變得有點復雜，你應該使用useReducer 。

Answer 2

因此，如果您的狀態是一個對象，您將需要創建一個新對象並使用它進行設置。 這可能涉及傳播舊狀態。 例如：

const [person, setPerson] = useState({ name: 'alice', age: 30 });

const onClick = () => {
  // Do this:
  setPerson(prevPerson => {
    return { 
      ...prevPerson, 
      age: prevPerson.age + 1 
    }
  })

}

也就是說，使用鈎子你通常不再需要你的狀態是一個對象，而是可以多次使用 useState 。 如果您不使用對象或數組，則不需要復制，因此也不需要傳播。

const [name, setName] = useState('alice');
const [age, setAge] = useState(30);

const onClick = () => {
  setAge(prevAge => prevAge + 1);
}