javascript - 为什么（记忆的）子组件要重新渲染？

Question

我有两个 React 功能组件：C1和C2. C2嵌套在里面C1：

const C2 = () => {
  console.log("C2 Render");
  return (
    <div>I am Component 2</div>
  );
};

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

CodePen在这里。

问题

我知道一个组件在不同的情况下会被重新渲染。其中之一是父级重新渲染。

这就是为什么我在C2. "C2 Render"但是每次单击按钮时，我仍然可以看到控制台显示。

为什么？

Answer 1

C1 因为状态改变而重新渲染，所以你的记忆组件每次都被重新声明。只需将 C2 包装在 a 中React.memo()，您就不会看到重新渲染

const MC2 = React.memo(() => {
  console.log("C2 Render");
  return (
    <div>I am Component 2</div>
  );
}, () => true);

或者，如果您只想记忆一个用例，请将其放在 C1 组件之外并记忆该组件：

const C2 = () => {
  console.log("C2 Render");
  return (
    <div>I am Component 2</div>
  );
};

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>
  );
}