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中，我显示了最喜欢/不喜欢的状态。我在TemplateCell中将shouldComponentUpdate写为

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

中找到了

永远不要突破您可能听说过不要在道具和状态中改变对象和数组。如果要改变父组件中的对象，则“纯”子组件将不会更新。虽然上游的值发生了变化，但是孩子会将参考与之前的道具进行比较而不会发现差异。

我相信我的数组是可变的，这就是为什么更改完成的项目对象在props和nextProps中保持不变。如何避免这个

Answer 1

你的数组不可变。根据我的理解，当对它进行更改时，将返回一个新的数组。这就是为什么通过参考检查在这里帮助你的原因。您需要检查项目中的某个值。

例如：

shouldComponentUpdate(nextProps, nextState) {

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

Answer 2

我不确定这是最好的答案，但我设法解决了这个问题。我使用过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
}

避免重新渲染FlatList行

2 个答案: