有没有使用 React.memo/PureComponent 比不使用它的性能更差的例子？

Question

我在讨论和文章（其中许多来自 React 的开发人员）中多次看到提到 React.memo 或 PureComponent 会带来性能开销，并且应该仅在实际测量性能后应用。

但是，正如 this answer 中所见，认为对 props 进行浅层比较的开销可能超过深度 VDOM 比较的成本是违反直觉的，而且如果没有一个具体的例子来实际展示React.memo 或 PureComponent 确实更慢的情况。

但是，在花了整整一个晚上搜索有关此主题的更多信息之后，我还没有找到这样的示例。

是不是因为这样的例子构造起来不那么简单？或者它是如此微不足道，以至于在大多数情况下都可以观察到性能损失（因此无需编写一些示例代码来展示这种效果）？

Answer 1

根据我的理解，如果从父级传递到子级的 prop 保证在每次重新渲染时都会发生变化，React.memo 可能会因为每次重新渲染都会执行额外的比较而阻碍性能。

例如：

import React, { useState } from "react";

export default function Form() {
  const [text, updateText] = useState("");

  const handleSubmit = (e) => {
    updateText(e.target.value);
  };
  return (
    <>
      <Input value={text} onChange={handleSubmit} />
    </>
  );
}

const Input = React.memo(function Input(props) {
  console.log("render");

  return (
    <>
      <input value={props.value} onChange={props.onChange} />
    </>
  );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

在这种情况下，Input 组件将在每次父级重新渲染时重新渲染，因为 handleSubmit 没有被记忆，并且每次引用都会改变。添加memo 会影响性能，因为它会在重新渲染之前强制进行道具比较，并且道具比较总是返回false，所以结果memo 只是为每个渲染添加了一个额外的对象比较。