在使用React Hooks时候,我发现这两个React Hooks文档有些混乱。使用状态挂钩更新状态对象的最佳实践是哪一种？

想象一下要进行以下状态更新:

INITIAL_STATE = {
  propA: true,
  propB: true
}
stateAfter = {
  propA: true,
  propB: false   // Changing this property
}

选项1

从Using the React Hook文章中，我们可以做到:

const [count, setCount] = useState(0);
setCount(count + 1);

所以我们可以做:

const [myState,setMyState] = useState(INITIAL_STATE)

然后:

setMyState({
  ...myState,
  propB: false
});

选项2

从Hooks Reference我们得到:

与在类组件中找到的setState方法不同，useState可以不会自动合并更新对象。您可以复制此通过将功能更新程序形式与对象传播相结合来实现行为 句法:

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

据我所知，两者都有效。那么区别是什么呢？最佳做法是哪一种？我应该使用传递函数(选项2)来访问先前的状态，还是应该简单地使用扩展语法访问当前状态(选项1)？

最佳答案

这两个选项都是有效的，但是就像在类组件中使用setState一样，在更新从已经存在的状态中派生的状态时，需要小心。

如果您例如连续两次更新计数，如果不使用更新状态的函数版本，它将无法按预期工作。

import React,{useState} from 'react';
export default function Countcom(){
  const [count,setCount] = useState(0);
  function brokenIncrement(){
    setCount(count+1);
    setCount(count+1);
  }
  function increment(){
    setCount(count=>count+1);
    setCount(count=>count+1);
  }
  return (
    <div>
        <div>{count}</div>
        <button onClick={brokenIncrement}>Broken increment</button>
        <button onClick={increment}>Increment</button>
    </div>
  )
}

第一个按钮效果将无法按预期工作~