警告,VirtualizedList:您有一个很快更新的大型列表

问题描述 投票:0回答:1

我的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删除警告?

reactjs
1个回答
0
投票

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以供参考。

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