为什么被React.memo包裹的子组件仍然会触发重新渲染？

你遇到的问题核心原因是你把React.memo包装后的组件MC2定义在了父组件C1的函数体内部。

React 函数组件每次重渲染时，整个组件函数的代码都会完整执行一遍。你写在C1内部的const MC2 = React.memo(C2, () => true)语句，会在每次C1重渲染时生成一个全新的MC2组件引用。
对于 React 渲染逻辑来说，只要组件的引用发生了变化，就会判定这是一个完全不同的新组件，会直接销毁旧组件实例，重新挂载新的实例，这个过程不会触发React.memo的 props 比较逻辑，所以你写的自定义比较函数完全不会生效，自然每次都会触发C2的重渲染，打印对应的日志。

• 把MC2的定义移到C1组件外部即可，示例代码如下：

const C2 = () => {
  console.log("C2 Render");
  return (
    <div>I am Component 2</div>
  );
};
// 移到外部定义memo包装后的组件
const MC2 = React.memo(C2, () => true);

const C1 = () => {
  const [text, setText] = useState("Hello");
  
  return (
    <div className="box">
      <h1>The Button</h1>  
      <button
        onClick={() => {
          setText(`${text} b`);
        }}
        className="button">
          Click me
       </button>
      <div>
        {text}
      </div>
      <MC2 />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Andry