Question

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

为了调查这个问题，我尝试进行console.log道具。

第一个组件基于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为真？

Answer 1

如果您使用===，JS将进行参考比较，您需要的是深度比较。为此，您可以使用类似== https://stackoverflow.com/a/38416465/8548193

的方法

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

与lodash一样，会是这样：

const _ = require("lodash");

_.isEqual(prevProps, nextProps);

即使prop从未更改，React.memo prevProps始终与nextProps不同

1 个答案: