我正在使用功能组件,并使用Flatlist来呈现数据列表, 一切正常,但是每次状态获得更多数据时,它总是重新渲染现有数据 这会导致性能问题,我已经从SO中阅读了这些文章,但仍然没有任何线索
这是我使用主Flatlist的代码
<FlatList
horizontal={false}
showsHorizontalScrollIndicator={false}
data={users}
keyExtractor={(item, index) => String(index)}
renderItem={RenderUser}
onEndReachedThreshold={0.7}
onEndReached={callBackMoreData}
/>
,这里正在工作RenderUser,但是它会重新渲染现有项目的问题 如果状态有其他数据,我想实现的只是渲染其他数据 数据
import React from 'react';
import { ListItem } from 'react-native-elements';
const RenderUser = ({ item, index }) => {
return (
<React.Fragment>
{ console.log('index: ', index)}
<ListItem
title={item.attributes.name}
/>
</React.Fragment>
);
};
export default RenderUser;
并且我确实尝试使用下面的代码(但是我收到一条错误消息,说 TypeError:renderItem不是函数。 (在“ renderItem(props)”中,“ renderItem”是一个 对象的实例))
import React, { memo } from 'react';
import { ListItem } from 'react-native-elements';
const RenderUser = ({ item, index }) => {
return (
<React.Fragment>
{ console.log('index: ', index)}
<ListItem
title={item.attributes.name}
/>
</React.Fragment>
);
};
export default memo(RenderUser);
答案 0 :(得分:1)
根据官方文件做出反应:
默认情况下,它将仅对props对象中的复杂对象进行浅层比较。如果要控制比较,还可以提供自定义比较功能作为第二个参数
function MyComponent(props) {
/* render using props */
}
function areEqual(prevProps, nextProps) {
/*
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise return false
*/
}
export default React.memo(MyComponent, areEqual);
您需要添加条件:
import React, { memo } from 'react';
import { ListItem } from 'react-native-elements';
const RenderUser = ({ item, index }) => {
return (
<React.Fragment>
{ console.log('index: ', index)}
<ListItem
title={item.attributes.name}
/>
</React.Fragment>
);
};
function arePropsEqual(prevProps, nextProps) {
/*
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise return false
*/
return nextProps.item.attribute.name===prevProps.item.attribute.name
}
export default memo(RenderUser,arePropsEqual);
注意:不确定您将获得多少个道具以及什么是独特的。基本上,您需要比较最后一个等于此返回的值,这样就可以使react不重新渲染您的组件