如果只有 prop 有 useCallback，為什么子組件會重新渲染？

Question

如果子組件的道具（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 被重新渲染，因為它的父級被重新渲染。 注意：子項是綠色條。

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獲取道具，所以無論您使用useCallback包裝numberModifier ，都會重新渲染您Parent內的整個嵌套組件。

如果你想防止你的Child組件重新渲染，用React.memo()包裝你的Child組件