React Native Flatlist 不会在 PureComponent 上重新渲染

Question

下面是我的 Flatlist 代码。它工作正常，但有点滞后。所以我在互联网上搜索了一下，发现将 Component 更改为 PureComponent 可以提高平面列表的性能。所以我改变了它，但在那之后我的 iconType 不起作用。当用户触摸列表项时，它不会更改该复选框。 PureComponent 是否不会在触摸时重新呈现？

<FlatList
  style={{flex:1}}
  data={finalData}
  showsVerticalScrollIndicator={false}
  renderItem={({item})=>{
    var iconType = (this.state.selectedItems.indexOf(item.name)>-1?"ios-checkmark-circle":"ios-checkmark-circle-outline");
    return(
      <TouchableOpacity
        onPress={
          ()=>{
            var selectedItems = this.state.selectedItems;
            var selectedItemsData = this.state.selectedItemsData;
            if(selectedItems.indexOf(item.name)>-1){
              const index = selectedItems.indexOf(item.name);
              selectedItems.splice(index, 1);
              selectedItemsData.splice(index,1);
            }else{
              selectedItems.push(item.name);
              selectedItemsData.push({name:item.name,id:item.id});
            }

            this.setState({selectedItems});
            this.setState({selectedItemsData});
          }}>
        <View style={{padding:20,flexDirection:'row',alignItems:'flex-start'}}>
          <Icon name={iconType} color="#45AA6F" size={25} />
          <Text style={{marginLeft:10,paddingTop:4,color:'#9B9B9B',fontWeight:'500'}}>{item.name}</Text>
        </View>
        <Dash style={{height:1}} dashColor="#45AA6F"/>
      </TouchableOpacity>)}
  }
/>

Answer 1

PureComponent 将防止浪费的重新渲染，除非实际的 id 发生变化， 通过将 extraData={this.state} 传递给 FlatList，我们确保 FlatList 本身会在 state.selected 更改时重新渲染。只需将 extraData 道具添加到您的 flatlist 组件中。来源：Official Document Flatlist

 /* Sample FlatList Example */

import React, { PureComponent} from 'react';
import {
  FlatList,
  StyleSheet,
  Switch,
  Text,
  View,
} from 'react-native';

export default class FlatListView extends PureComponent {
 
  constructor(props: Object) {
    super(props);
    this.state = {
      words: [
        { key: 1, text: 'Notification', toggle:false}, 
        { key: 2, text: 'Wifi', toggle:false}, 
        { key: 3, text: 'Bluetooth', toggle:false}
      ]
    }
  };

  render() {
    return( 
      <FlatList
        data={this.state.words}
        extraData={this.state}
        renderItem={({item, index}) => 
          <View style={styles.wordsContainer}>
            <Text>{item.text}</Text>
            <Switch
              style={styles.pilgrimsWordSwitch}
              onValueChange={(toggleValue) => {
             /*
              *  Cloning the words array to temp, So that the reference to this.state.words array will change.
              *  Means this.state.words === temp will give false value.
              */

                let temp = this.state.words.slice(0);
                temp[index].toggle = toggleValue;
                this.setState({words: temp});
              }}
              value={ item.toggle }
            />
          </View>
        }
      />
    )
  }
}

const styles = StyleSheet.create({
  wordsContainer: {
    alignItems:'center', 
    backgroundColor:'green',  
    flexDirection:'row',
    height:100, 
    justifyContent:'center', 
    padding:20,
  },
  pilgrimsWordSwitch: {
    flex:1, 
    justifyContent:'flex-end'
  }
});

Answer 2

不要改变数组，这会导致组件无法重新渲染：

selectedItems.splice(index, 1); 替换为非变异进程。

你或许可以使用Array.filter https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter 或

Array.maphttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

您可以在此处比较非变异方法与变异方法： https://lorenstewart.me/2017/01/22/javascript-array-methods-mutating-vs-non-mutating/