javascript - 即使使用 extraData={this.state}，PureComponent FlatList 也不会重新渲染

Question

经过一些研究，我似乎需要使用 PureComponent 而不是常规组件来提高 FlatList 的速度。这样它就不会重新渲染整个列表，而只会重新渲染已更改的行。但是，当我这样做时，平面列表不会重新渲染。

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

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

我将列表项从渲染函数移到外部 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

您可能需要像这样操作 onPressListItem 函数中的 thePressedSymbol

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中，Object是一个引用类型。您可以在控制台中尝试此操作

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 组件来进行深度比较而不是浅度比较。