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

它正在按预期方式工作。相等比较函数仅在第一个渲染之后运行在渲染上。没有什么可“比较”第一个渲染上的道具，因为那是在记忆之时。因此，您不会看到"memo"登录控制台-它只呈现一次，但是App组件不会重新呈现，因此不会调用比较功能。

尝试向您的应用程序组件添加简单的状态更新以强制重新呈现。您将在控制台中看到"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仅在组件重新渲染导致严重的性能问题的情况下存在。也许您是在学习React的过程中这样做的，但是在大多数情况下，React自身的内部优化已绰绰有余。过早的优化是不好的！

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

1 个答案: