javascript - react setState 函数

Question

这两个状态更新函数有什么区别，推荐的方法是什么？这两个功能在我的应用程序中都可以正常工作。
选项 1

const [profile, setProfile] = useState<{name: string, age: number}>({
    name: 'John Doe',
    age: 28,
  });

setProfile((prevState) => {
    return {
      ...prevState,
      age: profile.age + 100,
    }
  });

选项 2

const [profile, setProfile] = useState<{name: string, age: number}>({
    name: 'John Doe',
    age: 28,
  });

setProfile({
    ...profile,
    age: profile.age + 100,
  });

Answer 1

通常，每次您想要根据之前的状态更新您的状态时，您应该使用更新状态的函数式方法。它确保您传入的当前状态是“最新版本”。
当您想根据不同的值设置状态时，不依赖于先前的状态，您可以直接设置状态，而无需使用功能更新。
文档中的示例很好地解释了这一点:
https://reactjs.org/docs/hooks-reference.html#usestate
文档包括这个很好的例子:

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}

请注意，与类组件中的 setState 不同，useState 不会合并更新，同样来自文档:

Unlike the setState method found in class components, useState doesnot automatically merge update objects. You can replicate thisbehavior by combining the function updater form with object spreadsyntax:

const [state, setState] = useState({});
setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

选项 2 在大多数情况下都有效，因为您很少会在另一个状态更改之前出现状态更改，但它可能发生在更复杂的情况下，或者使用 useEffect 或 setTimeout 函数，在这种情况下，功能更新是强制性的。