React.memo-为什么不调用我的相等函数?

问题描述 投票:2回答:2

我有一个父组件,该组件根据通过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时,所有子项都被重新渲染,而我试图避免这种情况,我不希望其他子项被重新渲染,我只想渲染最后一个添加的子项。

所以我在孩子身上尝试了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);

任何想法为什么?

reactjs
2个回答
1
投票

简而言之,这种行为的原因是由于React的工作方式。

React期望每个组件都有唯一的密钥,因此它可以跟踪并知道哪个是哪个。通过使用shortid.generate()来创建密钥的新值,对该组件的引用也会更改,React认为它是一个全新的组件,需要重新渲染。

在您的情况下,如果父项中的道具发生任何更改,React都会重新渲染所有子项,因为与以前的渲染相比,所有子项的键都将有所不同。

Please reference this wonderful answer to this topic

希望这会有所帮助!


0
投票

我不知道您的库的其余部分,但是我做了一些更改,您的代码(并且大部分)似乎可以正常工作。因此,也许它可以帮助您缩小原因范围。

https://codesandbox.io/s/cocky-sun-rid8o

© www.soinside.com 2019 - 2024. All rights reserved.