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

Question

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

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

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 得到了 props online，无论你用 useCallback.[=20 包装 numberModifier，你 Parent 内的整个嵌套组件都会被重新渲染=]

如果你想阻止你的 Child 组件重新渲染，请用 React.memo()

包装你的 Child 组件

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

Why is child component re-rendering if only prop has useCallback?

javascript

reactjs

react-hooks

usecallback