javascript - React Native PureComponent 渲染

Question

阅读When to Use Component or PureComponent在不要在渲染中的函数中绑定(bind)值部分中，它提到而不是这样做 <CommentItem likeComment={() => this.likeComment(user.id)} />你应该这样做<CommentItem likeComment={this.likeComment} userID={user.id} />然后有:

class CommentItem extends PureComponent {
  ...
  handleLike() {
    this.props.likeComment(this.props.userID)
  }
  ...
}

因为当调用父级的 render 方法时，会创建一个新函数(带有新引用)并传递给 likeComment这将导致所有子级重新渲染，即使数据本身完全相同。

我对箭头函数的绑定(bind)方式有点困惑，并且想知道以下示例是否也会导致不良行为

_keyExtractor = (item, index) => String(index);

render() {
    return (
        <FlatList
            ...
            keyExtractor={this._keyExtractor}
            ...>
        </FlatList>
    );
}

如FlatList是一个 PureComponent (我相信)， _keyExtractor 的定义结果是 FlatList如果它的容器父容器正在重新渲染？

Answer 1

他在这里引用的引用是对象引用如您所知，{} === {} 是 false

在 javaScript 中，函数是对象，因此每次调用渲染时，子级都必须重新渲染，因为您传递了一个新函数。

(x => x) === (x => x) // false.

您提供的最后一个示例很好，因为该函数将始终保留其引用。