React.memo prevProps 总是与 nextProps 不同，即使 props 永远不会改变

Posted 2023-02-21

【中文标题】React.memo prevProps 总是与 nextProps 不同，即使 props 永远不会改变

【英文标题】：React.memo prevProps always different from nextProps even if props never changes

【发布时间】：2019-10-27 04:23:07

【问题描述】：

我正在尝试减少子组件中不必要的渲染。当子组件触发状态修改时，所有其他未受影响的组件都会重新渲染（当然是在虚拟 DOM 中）。 我正在使用 React.memo，但如果我让与 React.memo 进行比较，则渲染结果与我没有使用它时相同。

为了调查问题，我尝试控制台记录道具。

第一个组件根据 props 和来自另一个文件的模板呈现组件列表。

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 组件中使用备忘录

    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 一样，所以我 console.log 每个道具。

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

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

【参考方案1】：

如果你用===JS会做一个参考比较，你需要的是深度比较。为此，您可以使用类似这样的东西 => https://***.com/a/38416465/8548193

或使用 lodash [https://lodash.com/docs/] 使其更容易；

使用 lodash 会是这样的：

const _ = require("lodash");

_.isEqual(prevProps, nextProps);

【讨论】：

你的意思是即使对象相同，单靠React.memo也不能做这种优化？我使用 === 添加了该功能，因为仅 React.memo 并没有像我希望的那样工作。

是的，因为 React.memo 只进行了浅显的比较：reactjs.org/docs/react-api.html#reactmemo

是的，也许我误解了浅比较的含义，我认为它会检查每个键的每个值是否相同，但现在阅读其他答案似乎检查引用是否是一样，那么有没有可能当props传下来的时候nextProps有不同的引用呢？

谢谢，我不知道我是怎么错过这个信息的。