将需要参数的函数正确传递给 PureComponent答案

【问题标题】：Pass function requiring parameter to PureComponent properly将需要参数的函数正确传递给 PureComponent
【发布时间】：2019-01-29 23:54:18
【问题描述】：

我正在使用 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>

【问题讨论】：

我认为您需要将wishlistAddPresed={this.wishlistAddPresed(item)} 更改为wishlistAddPresed={this.wishlistAddPresed}。使用您提供的代码，我看不出有什么特别的错误。
当我这样做时，wishlistAddPresed 中的“项目”不是我的 renderItem 中的项目。
那么wishlistAddPresed={() => this.wishlistAddPresed(item)} 应该意味着你得到了正确的项目，问题是如果你有{this.wishlistAddPresed(item)}，它会在每次渲染时调用，而不是在按下“愿望清单添加”时调用。让我知道这是否有帮助，我会将其添加为答案。
这似乎与我的效果相同。 wishlistAddPresed 函数按预期工作，但所有 GridItem 在每次状态更改时都会重新渲染，即使它们的 item 属性没有更改。
我之前在 Component 中使用过 shouldComponentUpdate ，但如果我可以使用 PureComponents 来代替，我试图避免多次编写该函数。顺便谢谢你的帮助。我想现在我可能需要坚持写 shouldComponentUpdate 如果我需要的东西不能用 PureComponent 完成。

标签： reactjs react-native

【解决方案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 就不会像应有的那样不正确地重新渲染。

【讨论】：