javascript - 在 react 功能组件中 setState 的功能语法有什么用？

Question

这个问题在这里已经有了答案:





Why React useState with functional update form is needed?

(5 个回答)



When are functional updates required for computations involving previous state?

(1 个回答)


1年前关闭。




我们谈论的是具有 useState 的功能组件
让我们说const [age, setAge] = useState(0)现在让我们在更新时说age我必须使用以前的ageReact 文档提到了一个叫做 FUNCTIONAL UPDATES 的东西。您可以在其中传递一个函数，该函数的参数将是状态的先前值，例如。setState((previousAge) => previousAge + 1)当我能做到的时候，为什么我需要这样做setState(previousAge + 1)使用函数式有什么好处setState ,
我知道在基于类的组件中有一个叫做 的东西。状态更新批处理 在功能上，
但我在功能组件文档中找不到类似的东西。

Answer 1

它们不一样，如果您的更新依赖于在状态中找到的先前值，那么您应该使用函数形式。如果您在这种情况下不使用函数形式，那么您的代码有时会中断。
为什么会中断以及何时中断
React 功能组件只是闭包，闭包中的状态值可能已过时 - 这意味着闭包内的值与该组件处于 React 状态的值不匹配，这可能发生在以下情况:
1-异步操作(In this example点击慢添加，然后多次点击添加按钮，稍后你会看到状态被重置为点击慢添加按钮时闭包内的状态)

const App = () => {
  const [counter, setCounter] = useState(0);

  return (
    <>
      <p>counter {counter} </p>
      <button
        onClick={() => {
          setCounter(counter + 1);
        }}
      >
        immediately add
      </button>
      <button
        onClick={() => {
          setTimeout(() => setCounter(counter + 1), 1000);
        }}
      >
        Add
      </button>
    </>
  );
};

2-当您在同一个闭包中多次调用更新函数时

const App = () => {
  const [counter, setCounter] = useState(0);

  return (
    <>
      <p>counter {counter} </p>
      <button
        onClick={() => {
          setCounter(counter + 1);
          setCounter(counter + 1);
        }}
      >
        Add twice
      </button>
   
    </>
  );
}