2

当组件由地图“生成”时，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} />
))}

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

4

1 回答 1

3

它按预期工作。相等比较函数仅在第一次渲染之后的渲染上运行。在第一次渲染时没有什么可以“比较”道具，因为那是它被记忆的时候。因此，您"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 自己的内部优化已经绰绰有余。过早的优化是不好的！

于 2019-07-02T17:11:53.017 回答