Question

在不绑定渲染中的函数中的值部分中读取When to Use Component or PureComponent时，它提到了而不是 <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，这会导致所有子项重新呈现，即使数据本身都是同样的。

我对箭头函数如何绑定感到有点困惑，我想知道以下示例是否也会导致不良行为

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

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

由于FlatList是PureComponent（我相信），_keyExtractor的这个定义是否会导致FlatList重新呈现，如果它是容器父项？

Answer 1

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

在javaScript函数中

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

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

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

Answer 2

希望这段代码可以帮助你：

export default class PureComponent extends Component {
shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }
}

你甚至可以回复：

return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState);

注意：

import {isEqual} from 'lodash';
import shallowCompare from 'react-addons-shallow-compare';

不要忘记这些进口。

该组件将作为完美的PureComponent。

React Native PureComponent渲染

2 个答案: