小编Ask*_*_29的帖子

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

我正在尝试减少子组件中不必要的渲染。当子组件触发状态修改时，所有其他不受影响的组件都会重新渲染（当然是在虚拟 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>
  )
}

Run Code Online (Sandbox Code Playgroud)

我开始在 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 };

Run Code Online (Sandbox Code Playgroud)

有了这个，我得到了与没有使用 React.memo 相同的渲染，所以我 console.log 每一个 props。