导致React.memo 失效的几种情况

1. 组件内联属性

function ExpensiveComponent({ style }) {
  return <div style={style}>I'm expensive!</div>
}
 
const ExpensiveTree = React.memo(ExpensiveComponent)

使用时

<ExpensiveTree style={{ backgroundColor: 'blue' }} />

直接在组件上传递对象的方式会在无意中破坏 React.memo 的效果，对开发者来说，每次渲染是 style 的值并没有发生变化，但是对于React来说，每次渲染都相当于创建了一个新的 style 对象，导致 memo 失效。

解决办法可以将 style 手动缓存:

const style = useMemo(() => { backgroundColor: 'blue' }, []);

2. Children

如果你的组件使用了 memo，并且支持传入 children ，那么对 React 来说 memo 是无效的

function App() {
  return (
    <ExpensiveTree>
      <p>Hello, world!</p>
    </ExpensiveTree>
  )
}
 
function ExpensiveComponent({ children }) {
  return (
    <div>
      I'm expensive!
      {children}
    </div>
  )
}
 
const ExpensiveTree = React.memo(ExpensiveComponent)

JSX只是React.createElement的语法糖，它会在每次渲染时创建一个新对象，所以 p 标签虽然看起来每次都是相同的，但是它不是相同的引用。

• The Uphill Battle of Memoization | TkDodo’s blog