Question

function Counter() {
  const [count, setCount] = useState(0);
  const [calculation, setCalculation] = useState(0);

  useEffect(() => {
    setCalculation(() => count * 2);
  }, [count]); // <- add the count variable here

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>+</button>
      <p>Calculation: {calculation}</p>
    </>
  );
}

我对这一职能的不理解是:

setCalculation(() => count * 2); setCount((c) => c + 1);

They do the similar work, but why does the first line NOT have the parameter? Does this make any difference between two lines?

为什么使用“c”而不是“count”? (While `count'在前线使用)。

谢谢。

我认为他们也做了同样的工作,但我现在并不肯定。

Answer 1

两者在计算现值时有微妙差异。

页: 1

setState(() => count*2)
// or
setState(count * 2)

<代码>>值从现在起算为关闭。主要含义是,将<代码>(<>count>/code>值用于更新国家并不保证您具备最新数据。

如果设定者可能无法按规定行事,例如因子业务、同时交付等。

差异的最简单表现是,共同发出多重呼吁:

// Assume count is initially 5
setState(count * 2) // count is 10
setState(count * 2) // count is _still_ 10, because the `count` variable is still 5

Versus:

// Assume count is initially 5
setState(count => count * 2) // count is 10
setState(count => count * 2) // count is 20

反馈格式保证了你获得最新价值。

作为一项建议,如果你的新国家取决于老国家,就可以通过背靠背。

友情链接