Reactjs 为什么要在这个场景中渲染孩子？（状态相同，使用useState）

import React，{useState，useffect}来自“React”；
常量Foo=（）=>{
console.log（“呈现foo”）；
返回foo；
};
常量应用=（）=>{
const[value，setValue]=使用状态（1）；
useffect（（）=>{
控制台日志（“效果”，值）；
}，[价值]；
控制台日志（“呈现”）；
返回(
{" "}
setValue（value）}>单击以渲染
);
};
导出默认应用程序；

现在根据

如果将状态挂钩更新为与当前状态相同的值，React将退出，而不渲染子对象或激发效果。（强调矿山） （React使用Object.is比较算法。）

请注意，React可能仍然需要在取出之前再次渲染该特定组件。这不应该是一个问题，因为React不会不必要地深入树中。如果在渲染时进行昂贵的计算，可以使用useMemo对其进行优化

在我给出的示例中，我们可以看到useEffect钩子没有启动（如文档所述），但是我的

Foo

组件正在渲染

为什么会这样

我认为内联函数可能会导致渲染，但如果我使用

useCallback

将其更改为记忆函数，则会发生相同的行为：

  const handleClick = useCallback(() => setValue(value), [value]);

  console.log("rendering");
  return (
    <div>
      {" "}
      <Foo /> <button onClick={handleClick}>Click To Render</button>
    </div>

consthandleclick=useCallback（（）=>setValue（value），[value]）；
控制台日志（“呈现”）；
返回(
{" "}
单击以渲染

解救逻辑是在react dom的v16.8.0中实现的，react在其中也引入了钩子，而您的演示使用了钩子的alpha版本，这就是为什么即使使用相同的状态更新，您仍然会看到触发重新渲染的原因

根据发行说明

• 避免在useState和useReducer挂钩的相同值上进行渲染。（@acdlite in#14569）

---

啊，谢谢。很高兴知道要注意这一点。