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

如何解决如果只有 prop 有 useCallback，为什么要重新渲染子组件？

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

为了测试这一点，我修改了“online”（在 Application 内部）的值，它恰好是 Parent 的 prop，因此当“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 被重新渲染，因为它的父级被重新渲染。注意：孩子是绿色条。

解决方法

好的，所以当父组件的状态发生一些变化时，所有子组件都会重新渲染，除非您使用 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 获得 props online，所以无论您用 Parent 包裹 numberModifier，您的 useCallback 中的整个嵌套组件都将被重新渲染。

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