reactjs - 将需要参数的函数正确传递给 PureComponent

Question

我正在使用 FlatList，在我的 renderItem 中我有一个名为 GridItem 的 PureComponent。我正在尝试传递需要 item 参数的函数 wishlistAddPresed，但是当以这种方式完成时，即使“item”没有改变，PureComponent 项目也会在每次状态更改时重新呈现。

我该如何解决这个问题？谢谢!

  wishlistAddPresed = (item) => console.log(item)

  renderItem = ({item}) => {
    return (
        <GridItem
            item={item}
            wishlistAddPresed={this.wishlistAddPresed(item)}
        />
    )
  }

  render () {
      console.log("Render products grid");
      return(
          <View style={styles.container}>
              <FlatList
                  data={this.state.data}
                  renderItem={this.renderItem}
                  keyExtractor={(item, index) => item.id}
              />
          </View>
      );
  }

在我的 GridItem 渲染中我有:

<TouchableOpacity style={styles.colButtonsG} onPress={this.props.wishlistAddPresed}>
    <IconG name='playlist-add-check' size={26} color="green" style={styles.icon} />
</TouchableOpacity>

Answer 1

诀窍是同时传递回调函数和参数(您已经在做)，然后在嵌套组件中，将项目传递给匿名回调。因此，在您的情况下，您需要执行以下操作:

<FlatList
  data={this.state.data}
  renderItem={({ item }) => {
    return <GridItem item={item} wishlistAddPressed={this.wishlistAddPressed} />
  }}
  keyExtractor={(item, index) => item.id}
/>

对于扩展 PureComponent 的 GridItem...

class GridItem extends React.PureComponent {
  render() {
    const {item, wishlistAddPresed} = this.props;

    return (
      <TouchableOpacity onPress={() => wishlistAddPressed(item)}>
        <IconG name="playlist-add-check" size={26} color="green" style={styles.icon} />
      </TouchableOpacity>
    );
  }
}

以这种方式完成后，wishlistAddPressed 会针对该行的特定项目进行调用，并保持函数相等性，这样 PureComponent 就不会像它应该的那样不正确地重新呈现。