反应渲染组件，即使 state 没有改变

Question

import { useState } from "react";

export default function App() {
  console.log("rendered...")
  const [count, setCount] = useState(0);

  const increaseCount = () => {
    setCount(count + 1);
  };

  const setFourValue = () => {
    setCount(4);
  };
  return (
    <div className="App">
      <div
        style={{ display: "flex", alignItems: "center", columnGap: ".25rem" }}
      >
        <button onClick={increaseCount}>Increase</button>
        <button onClick={setFourValue}>Set 4</button>
        <span>{count}</span>
      </div>
    </div>
  );
}

我试图找出组件渲染的时间和方式。 我尝试的情况是我将计数增加到 4，现在我的计数值为 4。但是我单击“设置 4”按钮我的计数值仍然是 4，但组件仍然重新渲染。 之后，如果再次单击“设置 4”按钮组件不会重新呈现。 为什么？

Answer 1

要添加 Barry 的答案，当您在使用increaseCount将其增加到4后第一次使用setFourValue将计数设置为4时，它实际上不是 4。控制台记录计数，您会看到它实际上是3 ，即使它屏幕上显示4 。

Answer 2

在 React 中，只有当组件中的state或prop发生变化时，组件才会重新渲染。

将4设置为4不是更改。

React 足够聪明，不会不必要地重新渲染。

Answer 3

您的increaseCount function 有问题。当您使用其先前值更新 state 属性时，必须使用回调参数。 这是由于 state 更新的异步性质。 （参见https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous ）

const increaseCount = () => {
    setCount((count) => (count + 1));
};

正如@Tim van Dam 所说，这可能是count为 3 而不是 4 的原因。

Answer 4

这里的大多数答案在解释当更新的 state 值取决于先前的 state 值时应该如何首选 setState 的回调模式时是正确的。 但问题的一部分仍然悬而未决

但我点击“设置 4”按钮，我的计数值仍然是 4，但组件仍然重新渲染。

我创建了这个sandbox ，这确实发生了。

如果我们从increaseCount执行setCount(4) ，然后从setFourValue ，两者都会触发重新渲染。

答案就在这里

请注意，React 在退出之前可能仍需要再次渲染该特定组件。 这不应该是一个问题，因为 React 不会不必要地 go “更深”到树中。

并且 React 确实没有 go 更深入到树中，您可以通过取消注释<Child>来检查。 它不会深入到树中，因为<Child>不会重新渲染，即使<App>会重新渲染。