Reactjs 包装组件可以避免子组件重新渲染.

我看到一个帖子是关于如何防止重新渲染，以及添加太多备忘录的.

发帖:https://d2.naver.com/helloworld/9223303 (它是用韩语写的，我不确定它是否有英文版本)

在这个过程中，它说

消除不必要的记忆的方法之一是使用包装组件可以避免重新呈现子组件 代码如下:

function ChildMemo () {  
  const [count, setCount] = React.useState(0);

  const doubleCount = count * count;
  console.log('doubleCount', count * count);

  return (
    <>
      <h2>count: {count}</h2>
      <h2>count * count: {doubleCount}</h2>
      <button onClick={() => setCount((prev) => prev + 1)}>Click</button>
    </>
  )
}

function ParentMemo({ children }) {  
  const [time, setTime] = React.useState(new Date());

  React.useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => {
      clearInterval(intervalId);
    };
  }, []);

  return (
    <>
      <h1>time: {format(time, 'hh:mm:ss')}</h1>
      {children}
    </>);
}

export default function Memo() {  
  return <ParentMemo>
    <ChildMemo/>
  </ParentMemo>
};

(代码从this posting开始)

实际上，当我运行上面的代码时，我可以看到子组件没有重新呈现.

作为参考， 下面的代码我稍加改动就会发生子组件重新呈现，导致父组件重新呈现与更新状态导致子组件重新呈现.

// this code doesn't have wrapping component, and there's ChildMemo re-rendering
// ChildMemo re-render at every single seconds(ParentMemo component re-rendering)
import "./styles.css";
import * as React from "react";

export default function App() {
  return (
    <div className="App">
      <ParentMemo />
    </div>
  );
}

function ChildMemo() {
  const [count, setCount] = React.useState(0);

  const doubleCount = count * count;
  console.log("doubleCount", count * count);

  return (
    <>
      <h2>count: {count}</h2>
      <h2>count * count: {doubleCount}</h2>
      <button onClick={() => setCount((prev) => prev + 1)}>Click</button>
    </>
  );
}

function ParentMemo({ children }) {
  const [time, setTime] = React.useState(new Date());

  React.useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => {
      clearInterval(intervalId);
    };
  }, []);

  return (
    <>
      <h1>time: {time.getTime().toString()}</h1>
      <ChildMemo />
    </>
  );
}

有谁知道为什么像上面这样的包装组件可以防止任何机会重新渲染？