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

Question

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

但是，正如在中看到的那样，认为对 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 会阻碍性能，因为它会在重新渲染之前强制进行道具比较，并且道具比较总是 returns false，所以结果 memo 只是为每个渲染添加了一个额外的对象比较.

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

Is there an example where using React.memo/PureComponent has worse performance than not using it?

performance

memoization

premature-optimization

reactjs