Question

经过一些研究，看来我需要使用PureComponent而不是常规Component来提高FlatList的速度。这样，它将不会仅显示已更改的行，而是仅重新渲染整个列表。但是，当我以这种方式进行操作时，平板列表不会重新呈现。

这个问题How to re-render flatlist?和其他类似的问题指出我必须在我的extradata={this.state}中使用FlatList，以便可以查看数据源中是否发生了任何数据更改，但是它不起作用< / p>

我尝试过this.state，this.state.symbols，尝试使用布尔值并在onPress函数中强制更改它，但似乎没有任何作用。

我将列表项从render函数移到了外部js文件中的自己的类中

export default class MyListItem extends React.PureComponent {
    render() {
        const { item } = this.props;
        return (
            <View style={{flex: 1, flexDirection: 'row'}}>
                <View style={{backgroundColor: 'powderblue'}}>
                    <Ionicons style={styles.listItemIcon} name={item.iconName} />
                </View>
                <View style={{backgroundColor: 'skyblue'}}>
                    <Text style={styles.listItem}>
                        {item.coinName.toUpperCase()} {item.symbol}
                    </Text>
                </View>
            </View>
        );
    };
}

我的renderListItem函数现在看起来像这样

renderListItem = ({ item , index}) => {
        return(
            <TouchableOpacity
                onPress={() => this.onPressListItem(index)}
            >
            <MyListItem
            item={item}
            />
            </TouchableOpacity>
        )
    }

这是onPress功能。如您所见，这里的状态已更改，所以不确定extraData为什么看不到

onPressListItem = ( index ) => {
        const copyOfSymbolsList = [...this.state.symbols];
        thePressedSymbol = copyOfSymbolsList[index];

        if (thePressedSymbol.iconName === 'md-star') {
            thePressedSymbol.iconName = 'md-star-outline';
        }else{
            thePressedSymbol.iconName = 'md-star';
        }
        copyOfSymbolsList[index] = thePressedSymbol;

        this.setState({ 
            symbols: copyOfSymbolsList
        });

    }

这是我的FlatList

<FlatList
                    data={this.state.symbols}
                    extraData={this.state.symbols}
                    keyExtractor= {(item, index) => item.symbol}
                    ItemSeparatorComponent={this.renderListSeparator}
                    renderItem={this.renderListItem}
                />

Answer 1

您可能需要像这样在thePressedSymbol函数中操纵onPressListItem

onPressListItem = ( index ) => {
        const copyOfSymbolsList = [...this.state.symbols];
        thePressedSymbol = {
          ...copyOfSymbolsList[index],
          iconName: copyOfSymbolsList[index].iconName === 'md-star' ? 'md-star-outline' : 'md-star';
        }
        copyOfSymbolsList[index] = thePressedSymbol;

        this.setState({ 
            symbols: copyOfSymbolsList
        });

    }

这是因为在Javascript中，对象是reference类型。您可以在控制台中尝试

var person1={
  name: 'John',
  age: 10
}
var person2 = person1;
console.log(person1===person2); // output: true
person2.age = 20;
console.log(person1===person2); // output: true
console.log(person1.age, person2.age); // output: 20 20

var person3 = {...person1};
console.log(person1===person3}; // output: false

这意味着，为了重新渲染FlatList，您需要传递一个全新的symbol项来替换数组中的现有项（这是我上面的解决方案所做的事情）；或者（我还没有尝试过），您也可以实现自己的FlatList组件来进行深层比较而不是浅层比较。

即使使用extraData = {this.state}，PureComponent FlatList也不会重新呈现

1 个答案: