即使状态值没有变化，也反应组件渲染

恶作剧

从 React Docs 中，我了解到只有当状态值发生变化时，组件才会重新渲染。

例如

import React, { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  console.log("I am rendering");

  const handleButtonClick = () => {
    setCount(0);
  };
  return (
    <>
      <button onClick={handleButtonClick}>Increment</button>
      Count value is: {count}
    </>
  );
}

即使我们单击按钮，该消息I am rendering也只会打印一次setCount，因为该函数正在将值设置0为当前值count

由于当前值和未来值没有变化，因此组件不会重新渲染。

意外行为

setCount(1)但是，当我们之前添加额外的行时，没有观察到类似的行为setCount(0)

import React, { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  console.log("I am rendering");

  const handleButtonClick = () => {
    setCount(1); //this line has been added extra
    setCount(0);
  };
  return (
    <>
      <button onClick={handleButtonClick}>Increment</button>
      Count value is: {count}
    </>
  );
}

count原则上，最终值的输出没有变化。但是，如果我们单击按钮，组件会重新渲染并打印消息I am rendering

我找不到这种行为的解释。这是预期线路上的行为吗？

只有当状态的最终值与当前值不同时，组件不应该重新渲染吗？

丹尼斯·瓦什

有时，Reacts 需要另一个渲染阶段来决定它是否需要救助。顺便说一句，当我们说“救助”时，意味着救助和解过程。

请注意有关救助状态更新的文档：

请注意，React可能仍需要在 bail out 之前再次渲染该特定组件。

这是另一个例子，展示了这个想法：

import React, { useEffect } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [state, setState] = React.useState(0);

  useEffect(() => {
    console.log("B");
  }, [state]);

  console.log("A");

  return (
    <>
      <h1>{state}</h1>
      <button onClick={() => setState(42)}>Click</button>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

您会注意到下一个日志及其解释：

A // First render
B // Mount

A // State change from 0 -> 42, triggers render
B // useEffect dep array change, triggers callback

A // **Our issue**, React needs another render

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。