Reactjs 警告，VirtualizedList：您有一个更新缓慢的大列表

我的

平面列表中出现此错误

：

VirtualizedList：您有一个更新缓慢的大型列表-请确保您的renderItem函数呈现符合React性能最佳实践的组件，如PureComponent、shouldComponentUpdate等。

我的

renderItem

是：

renderItem(item) {
    return (
        <View style={[styles.item]}>
            <AgendaItem item={item} />
        </View>
    );
}

renderItem（项目）{
返回(
);
}

和我的组件：

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;

从“React”导入React；
从“道具类型”导入道具类型；
从“react native”导入{Text，View，WebView}；
从“../../helpers”导入{filterString}”；
常量代理项=({
项目：{
标题
地点
颜色，
主办方，
开始的时候，
(完)，
描述
整天，
文本颜色
}
}) => {
让descriptionNoHtml=description.replace（/]+（>|$）/g，“”；
返回(
{标题(
{title}
)：null}
{描述(
{descriptionNoHtml}
)：null}
{地点(
{地点}
)：null}
{组织者(
{组织者}
)：null}
{开始时间(
{startTime+“-”+endTime}
)：null}
);
};
AgendaItem.propTypes={
标题：propTypes.string，
地点：propTypes.string，
颜色：propTypes.string，
组织者：propTypes.string，
description:propTypes.string，
startTime:propTypes.string，
endTime:propTypes.string，
全天：propTypes.string，
textColor:propTypes.string
};
导出默认代理项；

如何使用

shouldComponentUpdate

删除警告？

提供了渲染顶点化长列表时需要考虑的问题：

如果您的应用程序呈现长长的数据列表（数百行或数千行），我们建议使用称为“窗口化”的技术。这种技术在任何给定时间只渲染一小部分行，可以显著减少重新渲染组件所需的时间以及创建的DOM节点数

这就是您需要使用PureComponent或shouldComponentUpdate钩子的地方，以便仅在需要时进行更新

---

您使用的是无状态组件，它不能有任何生命周期方法。若要使用生命周期方法，您需要使用基于类的statefull组件

您可以用PureComponent或component替换无状态组件。若您使用组件，那个么您可能需要使用shouldComponentUpdate钩子来通知组件，只在检测到新的更改时才进行更新。下面是一个使用PureComponent的示例

替换：

const AgendaItem = ({
    item: {
        title,
        venue,
        colour,
        organiser,
        startTime,
        endTime,
        description,
        allDay,
        textColor
    }
}) => {

与：

如果不使用PureComponent，组件将在任何组件的每个状态更改时更新。但使用PureComponent，它将仅在检测到新项目时更新

---

如果你想使用shouldcomponentupdatehook，那就向前看吧。

Hey，我已经使用过PureComponent，但每次我收到这个警告时，

VirtualizedList：您有一个更新速度慢的大列表-确保您的renderItem函数呈现的组件符合最佳性能实践，如PureComponent、shouldComponentUpdate等。

class AgendaItem extends React.PureComponent {
  const { item: {
            title,
            venue,
            colour,
            organiser,
            startTime,
            endTime,
            description,
            allDay,
            textColor
        }
    } = this.props