时间戳

首页 > 解决方案 > 有没有使用 React.memo/PureComponent 比不使用它的性能更差的例子？

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

问题描述

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

但是，正如在这个答案React.memo中所看到的那样，认为对 props 进行浅层比较的开销可能超过深度 VDOM 比较的成本是违反直觉的，而且如果没有一个具体的例子来实际显示orPureComponent的情况，似乎很难反驳确实比较慢。

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

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

标签： reactjsperformancememoizationpremature-optimization

解决方案

根据我的理解，如果保证从父级传递给子级的道具在每次重新渲染时都会发生变化，则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只是为每个渲染添加了一个额外的对象比较。

推荐阅读