是否存在使用React.memo/PureComponent反而性能更差的实际示例？

核心结论 #

你找不到这类示例非常正常：React.memo/PureComponent 出现负收益的场景非常极端，几乎没有普适性的复现案例，大多都和具体的业务代码写法强绑定。

什么时候会出现 memo 反而更慢的情况？ #

只有两种场景下会出现浅比较开销高于重渲染开销的情况：

• 组件本身极度轻量，同时传入的 props 数量极多、结构复杂。比如组件只渲染一行固定文本，却传入了包含上百个字段的大对象作为 props，此时浅比较需要遍历上百个键做相等判断，而组件重渲染只要生成一个简单的 VDOM 节点，比对成本可以忽略，浅比较的开销就会超过重渲染成本。
• 用法错误导致浅比较完全做无用功：比如每次父组件渲染都给子组件传入新生成的对象、数组、箭头函数作为 props，此时浅比较每次都会判定 props 变化，还是要走完整的重渲染流程，等于凭空多了一次浅比较的开销，自然比不加 memo 更慢。

你可以参考下面这个极简的负优化示例：

// 极端轻量的子组件
const SimpleText = React.memo(({ contentConfig }) => {
  return <p>{contentConfig.text}</p>
})

function Parent() {
  const [count, setCount] = useState(0)
  // 每次渲染都生成新的配置对象，引用不稳定
  const contentConfig = { text: "普通文本" }

  return (
    <div>
      <button onClick={() => setCount(prev => prev + 1)}>计数+1</button>
      {/* 每次父组件更新，子组件都要先做一次浅比较，发现引用变化后还是要重渲染，白多了一步操作 */}
      <SimpleText contentConfig={contentConfig} />
    </div>
  )
}

为什么业内还是建议「先测速再用 memo」？ #

绝大多数业务场景下，只要组件有哪怕一点点复杂度，重渲染的成本都会远高于浅比较的开销，只要你能保证 props 引用稳定，memo 几乎都是正收益。但很多开发者添加 memo 都是凭感觉盲加，既没有确认组件重渲染是不是性能瓶颈，也没有保证 props 引用稳定，瞎加的情况下很容易出现上面说的无用浅比较的负优化情况，所以才会要求先通过 React DevTools 做性能分析，确认优化空间之后再动手。

内容的提问来源于stack exchange，提问作者syimyuzya