我正在尝试减少子组件中不必要的呈现。当一个子组件触发状态修改时，所有其他未受影响的组件都会重新呈现（当然是在虚拟DOM中）。我正在使用React.memo，但如果我让它与React.memo进行比较，呈现结果就像我没有使用它一样。
为了调查这个问题，我试着console.log这些 prop 。
第一个组件基于 prop 和来自另一个文件的模板呈现组件列表。

const List = props => {
  return (
    <div id="List">
      {template[props.status].map(
        el =>
          <ListItem
            activeClass={props.active === el.type ? 'active' : ''}
            handleClick={props.handleClick}
            key={el.type}
            itemType={el.type}
            text={el.text} />
        ) }
    </div>
  )
}

我开始在ListItem组件中使用memo

const ListItem = React.memo( props => {
      return (
        <button
          className={props.activeClass}
          onClick={props.handleClick}
          title={props.itemType}
          value={props.itemType} >

          {props.text}

        </button>
      )
    }, (prevProps, nextProps) => {
prevProps === nextProps };

我得到了相同的渲染，就好像我没有使用React.memo一样，所以我控制台记录了每一个 prop 。

prevProps === nextProps //false
prevProps.itemType === nextProps.itemType  //true
prevProps.text === nextProps.text  //true
prevProps.handleClick === nextProps.handleClick  //true
prevProps.activeClass === nextProps.activeClass  //true

handleClick来自一个钩子，我使用useCallback来获取始终相同的引用，我没有其他属性，所以我不知道为什么

prevProps === nextProps

仍然是false。这种情况发生在其他子组件中，所以我不想在每个子组件中添加自定义函数，接下来我应该检查什么来确保prevProps === nextProps为true？