reactjs - React.memo - 为什么我的相等函数没有被调用？

Question

我有一个父组件，它根据通过 props 接收到的数组来渲染子组件的集合。

import React from 'react';
import PropTypes from 'prop-types';
import shortid from 'shortid';
import { Content } from 'components-lib';
import Child from '../Child';

const Parent = props => {
  const { items } = props;

  return (
    <Content layout='vflex' padding='s'>
      {items.map(parameter => (
        <Child parameter={parameter} key={shortid.generate()} />
      ))}
    </Content>
  );
};

Parent.propTypes = {
  items: PropTypes.array
};

export default Parent;

每次添加新的 item 时，所有子项都会重新渲染，我试图避免这种情况，我不希望其他子项重新渲染，我只想渲染最后添加的一个。

所以我在 child 身上尝试了 React.memo，我可能会通过 code 属性或其他东西进行比较。问题是相等函数永远不会被调用。

import React from 'react';
import PropTypes from 'prop-types';
import { Content } from 'components-lib';

const areEqual = (prevProps, nextProps) => {
  console.log('passed here') // THIS IS NEVER LOGGED!!
}

const Child = props => {
  const { parameter } = props;
  return <Content>{parameter.code}</Content>;
};

Child.propTypes = {
  parameter: PropTypes.object
};

export default React.memo(Child, areEqual);

有什么想法吗？

Answer 1

简而言之，这种行为的原因是 React 的工作方式造成的。

React 期望每个组件都有一个唯一的 key ，以便它可以跟踪并知道哪个是哪个。通过使用shortid.generate()创建一个新的键值，对组件的引用发生变化，React认为它是一个全新的组件，需要重新渲染。

在您的情况下，在父级中的 props 发生任何更改时，React 将重新渲染所有子级，因为与之前的渲染相比，所有子级的键都将有所不同。

Please reference this wonderful answer to this topic

希望这有帮助!