我有一个父组件,该组件根据通过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);
任何想法为什么?
简而言之,这种行为的原因是由于React的工作方式。
React期望每个组件都有唯一的密钥,因此它可以跟踪并知道哪个是哪个。通过使用shortid.generate()
来创建密钥的新值,对该组件的引用也会更改,React认为它是一个全新的组件,需要重新渲染。
在您的情况下,如果父项中的道具发生任何更改,React都会重新渲染所有子项,因为与以前的渲染相比,所有子项的键都将有所不同。
Please reference this wonderful answer to this topic
希望这会有所帮助!
我不知道您的库的其余部分,但是我做了一些更改,您的代码(并且大部分)似乎可以正常工作。因此,也许它可以帮助您缩小原因范围。