将 React.memo 与映射集合一起使用

Question

当组件由地图“生成”时，react.memo（或挂钩版本）不知何故无法工作。

代码示例：https://codesandbox.io/embed/react-memo-example-iuqf4

const Item = ({ step }) => <div>{step.name}</div>;
const MemoItem = React.memo(Item, (prevProps, nextProps) => {
  console.info("memo"); //no console
  if (prevProps.show === nextProps.show) {
    return true;
  }
  return false;
});

const initialSteps = [{
    name: "Pim",
    show: true
  }, {
    name: "Christa",
    show: false
  }, {
    name: "Henk",
    show: true
  }, {
    name: "klaas",
    show: true
  }];

{steps.steps.map((step, 
    <MemoItem key={index} step={step} />
))}

我的期望是每个呈现的项目都被“记忆”（并在控制台中显示日志）。

Answer 1

一切正常。在第一次渲染之后，相等比较函数 仅运行s。 在第一次渲染时没有任何东西可以 "compare" 道具，因为那是它被记忆的时候。因此，您在控制台中看不到 "memo" 日志 - 它呈现一次，但 App 组件没有 re-render，因此不会调用比较函数。

尝试向您的应用程序组件添加一个简单的状态更新以强制 re-render。您将在控制台中看到 "memo" 行，但是记忆组件函数不会运行因为它们已成功记忆。

class App extends Component {
  render() {
    const { steps } = this.props;
    return (
      <div onClick={() => {
        this.setState({ time: Date.now() })
      }}>
        {steps.steps.map((step, index) => (
          <MemoItem key={index} step={step} />
        ))}
      </div>
    );
  }
}

编辑：我要指出的是，您进行此优化几乎毫无意义。 React.memo 存在于组件 re-render 导致严重性能问题的非常有限的情况下。或许你是作为学习 React 的练习来做的，但在绝大多数情况下，React 自身内部的优化是绰绰有余的。过早的优化是不好的！

将 React.memo 与映射集合一起使用

use React.memo with mapped collection

reactjs

memo