我的FlatList
出现了这个错误:
VirtualizedList:您有一个很难更新的大型列表 - 确保您的renderItem函数呈现遵循React性能最佳实践的组件,如PureComponent,shouldComponentUpdate等。
我的renderItem
是:
renderItem(item) {
return (
<View style={[styles.item]}>
<AgendaItem item={item} />
</View>
);
}
我的组件:
import React from "react";
import propTypes from "prop-types";
import { Text, View, WebView } from "react-native";
import { filterString } from "../../helpers";
const AgendaItem = ({
item: {
title,
venue,
colour,
organiser,
startTime,
endTime,
description,
allDay,
textColor
}
}) => {
let descriptionNoHtml = description.replace(/<\/?[^>]+(>|$)/g, "");
return (
<View
style={{
padding: 10,
backgroundColor: colour || "white"
}}
>
{title ? (
<Text style={{ color: textColor || "black" }}>{title}</Text>
) : null}
{description ? (
<Text style={{ color: textColor || "black" }}>
{descriptionNoHtml}
</Text>
) : null}
{venue ? (
<Text style={{ color: textColor || "black" }}>{venue}</Text>
) : null}
{organiser ? (
<Text style={{ color: textColor || "black" }}>{organiser}</Text>
) : null}
{startTime ? (
<Text style={{ color: textColor || "black" }}>
{startTime + " - " + endTime}
</Text>
) : null}
</View>
);
};
AgendaItem.propTypes = {
title: propTypes.string,
venue: propTypes.string,
colour: propTypes.string,
organiser: propTypes.string,
description: propTypes.string,
startTime: propTypes.string,
endTime: propTypes.string,
allDay: propTypes.string,
textColor: propTypes.string
};
export default AgendaItem;
如何使用shouldComponentUpdate
删除警告?
doc提供了渲染垂直长列表时需要考虑的内容:
如果您的应用程序呈现长数据列表(数百或数千行),我们建议使用称为“窗口化”的技术。此技术仅在任何给定时间呈现行的一小部分,并且可以显着减少重新呈现组件所花费的时间以及创建的DOM节点数。
这是您需要使用PureComponent或使用shouldComponentUpdate挂钩仅在需要时更新的地方。
您正在使用无状态组件,该组件不具有任何生命周期方法。要使用生命周期方法,您需要使用基于类的组件的statefull组件。
您可以使用PureComponent或Component替换无状态组件。如果使用Component,则可能需要使用shouldComponentUpdate挂钩来通知组件,仅检测到有关新更改的更新。这是使用PureComponent的示例。
更换:
const AgendaItem = ({
item: {
title,
venue,
colour,
organiser,
startTime,
endTime,
description,
allDay,
textColor
}
}) => {
附:
class AgendaItem extends React.PureComponent {
const { item: {
title,
venue,
colour,
organiser,
startTime,
endTime,
description,
allDay,
textColor
}
} = this.props
如果不使用PureComponent,组件将更新任何组件的每个状态更改。但是使用PureComponent时,只有在检测到新项目时才会更新。
如果你想使用shouldComponentUpdate hook,那么请向前看here以供参考。