Избегайте рендеринга строки FlatList

Question

Я использую React Native FlatList для отображения данных в строке.Ниже приведен мой код.

HomeScreen.js

render() {

    return (
      <View
        style={styles.container}
        onLayout={this.onLayout.bind(this)}>
        <Spinner visible={this.state.isShowSpinner} animation="fade" color={APP_THEME_COLOR} />
        <View style={styles.subContainerStyle}>

          {facetWebView}

          <AnimatedFlatList
            style={styles.flatListStyle}
            ref={flatListRef => this.templateFlatList = flatListRef}
            data={this.state.templatePosts}
            renderItem={({item}) => this.renderCellItem(item)}
          />
         </View>
         </View>
   } 

  renderCellItem(item, index) {

    return (
      <TemplateCell
        item={item}
        index={index}
        isPortraitMode={this.state.isPortraitMode}
        didSelectItemFromCell={(item) => {
          this.didSelectItemFromCell(item)
        }}
      />
    )
  }

В TemplateCell я показываю статус избранного / избранного.Я написал beforeComponentUpdate в TemplateCell как

shouldComponentUpdate(nextProps, nextState) {

    const isItemChanged = this.props.item != nextProps.item
    const isPortraitMode = this.props.isPortraitMode != nextProps.isPortraitMode
    return isItemChanged || isPortraitMode
}

But still it is rendering the cell again. How can I avoid this. 

. Я обнаружил, что в ссылке https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81

Никогда не MUTATE Вы, вероятно, слышали, чтобы не изменять объекты и массивы в реквизитах и ​​состоянии.Если бы вы изменяли объекты в родительском компоненте, ваши «чистые» дочерние компоненты не обновлялись бы.Хотя значения изменились в восходящем направлении, дочерний элемент сравнивал бы ссылку с предыдущими реквизитами и не обнаруживал бы различий.

Я считаю, что мой массив является изменяемым, поэтому изменения, выполненные объектом item, остаются такими же в props и nextProps,Как этого избежать

Answer 1

Я не уверен, что это будет лучший ответ, но мне удалось решить эту проблему.Я использовал библиотеку Deepcopy.

const newItem = deepcopy(item)
newItem.isFavorite = !item.isFavorite
const templates = this.state.templatePosts
var index = templates.indexOf(item)
templates.splice(index, 1, newItem);
this.setState({
  templatePosts: templates
})

Теперь я могу использовать

shouldComponentUpdate(nextProps, nextState) {

    const isItemChanged = this.props.item != nextProps.item
    const isPortraitMode = this.props.isPortraitMode != nextProps.isPortraitMode
    return isItemChanged || isPortraitMode
}

Answer 2

Ваш массив не является изменяемым.Из того, что я понимаю, когда в него вносятся изменения, возвращается новый массив, как и должно быть.Вот почему проверка по ссылке не поможет вам здесь.Вы должны проверить по некоторому значению в вашем товаре.

Например:

shouldComponentUpdate(nextProps, nextState) {

  const isItemChanged = this.props.item.status != nextProps.item.status
  const isPortraitMode = this.props.isPortraitMode != nextProps.isPortraitMode
  return isItemChanged || isPortraitMode
}