如果只有 prop 有 useCallback，为什么子组件会重新渲染？

Question

子组件只有在其 prop (numberModifier) 被修改时才应该重新渲染。 numberModifier 使用没有依赖关系的 useCallback。因此，它永远不会改变。

为了测试这一点，我修改了“online”（在 Application 内部）的值，它恰好是 Parent 的属性，因此当“online”被修改时，Application 和 Parent 都会重新渲染。

这是有道理的。

但是，Child 也会重新渲染。我不明白为什么会这样。只是prop（numberModifier）没有被修改。

为什么修改 online (Application) 的值时 Child 重新渲染？

如果这是正确的行为，那么使用 useCallback 的意义何在？

function Application() {
 const [online, setOnline] = useState(true);

  return (
    <div>
    <button onClick={()=>setOnline(!online)}>Change Flag</button>
    <Parent online={online}/>
    </div>
  );
}

function Parent({online}) {
  const [number, setNumber] = useState(1);
  const numberModifier = useCallback(()=> {
    setNumber(69)
  },[])

  return (
    <>
    <p>Online is {online.toString()}</p>
    <p>Number is {number}</p>
    <Child numberModifier={numberModifier} />
    </>
  );
}

function Child({ numberModifier }) {
    return (
        <button onClick={numberModifier}>modify</button>
    );
}

这是从分析器截取的屏幕截图。这表明 Child 被重新渲染，因为它的父级被重新渲染。 注意：Child 是绿色条。

Answer 1

好的，所以当父组件的状态发生一些变化时，所有子组件都会重新渲染，除非您使用 React.memo(Child) 包装您的子组件。

const [online, setOnline] = useState(true);

  return (
    <div>
    <button onClick={()=>setOnline(!online)}>Change Flag</button>
    <Parent online={online}/>
    </div>
  );

当online 状态已更改时， 所有子组件都重新渲染，在这种情况下你的<Parent online={online}/>

因为您的 Parent 获得了道具 online，所以无论您将 numberModifier 与 useCallback 包装在一起，您的 Parent 中的整个嵌套组件都将被重新渲染。

如果您想防止 Child 组件重新渲染，请使用 React.memo() 包装您的 Child 组件