使用React.Memo阻止组件重渲染不生效 如何排查错误？

你的实现存在三类错误 #

1. 自定义比较函数的返回值逻辑完全颠倒 #

React.memo 的比较函数返回规则为：返回true表示新旧 props 相等，组件不需要重渲染；返回false表示新旧 props 不相等，组件需要触发重渲染。
你当前写的逻辑是prevProps.content !== nextProps.content时返回true，这就会导致content发生变化时，React 判定 props 没有变化，直接跳过渲染，所以组件完全不会更新。

2. API 拼写大小写错误 #

React 官方提供的缓存 API 是React.memo（首字母小写m），你写的React.Memo属于拼写错误，部分 React 版本会直接导致缓存逻辑失效。

3. 代码语法错误，比较函数未正确传入 #

你的代码括号配对错误，将组件函数的闭合括号写在了比较函数之前，导致自定义比较函数没有作为第二个参数传递给React.memo，属于语法层面的错误。

正确实现代码 #

// React.memo 第一个参数为组件，第二个参数为自定义比较函数
const ExampleList = React.memo(({tabs, content}) => {
    // 内部和 tabs 相关的逻辑只要不影响返回的 JSX 就不会导致渲染异常
    return (
      <div>
        {/* 你的列表渲染逻辑 */}
      </div>
    )
}, (prevProps, nextProps) => {
    // 只要 content 相等就判定不需要重渲染，返回 true
    return prevProps.content === nextProps.content
})

额外优化建议 #

• 如果content是引用类型（对象/数组），要保证上层组件传递的content引用在内容不变的情况下不会变化，不要在上层组件每次渲染时都生成新的对象/数组，否则 memo 的比较还是会失效，必要时可以配合useMemo稳定content的引用。
• 如果列表条目本身也存在不必要的重渲染，可以给列表子项也加上React.memo，配合唯一 key 使用，进一步降低渲染开销。

内容的提问来源于stack exchange，提问作者Cristian Nicolae Perjescu