为什么（记忆化的）子组件会重新渲染？

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 here.

问题

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

这就是我在 C2 周围使用记忆组件的原因。但每次单击按钮时，我仍然可以看到控制台显示 "C2 Render"。

为什么？

Answer 1

C1 由于状态变化而重新渲染，所以你的记忆组件每次都重新声明。只需将 C2 包装在 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>
  );
}

为什么（记忆化的）子组件会重新渲染？

Why is the (memoized) child component re-rendering?

javascript

reactjs

react-functional-component

react-memo

问题