PureComponent FlatList не перерисовывается даже при использовании extraData = {this.state}

Question

После некоторых исследований кажется, что мне нужно использовать PureComponent, а не обычный компонент, чтобы повысить скорость моего FlatList.Таким образом, он не будет повторно отображать весь список, только строку, которая была изменена.Однако плоский список не выполняет повторную визуализацию, когда я делаю это таким образом.

Этот вопрос Как выполнить повторную визуализацию плоского списка? и другие подобные утверждают, что я должен использовать extradata={this.state} в моемFlatList чтобы он мог видеть, произошли ли какие-либо изменения данных в источнике данных, но он не работает

Я попробовал this.state, this.state.symbols, попытался использовать логическое значение и принудительно изменить его в моемФункция 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

Вам может потребоваться манипулировать 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 для глубокого сравнения вместо поверхностного сравнения.