反应本机PureComponent渲染

Question

在“何时 不要在渲染器的函数中绑定值”部分中阅读何时使用Component或PureComponent时 ，它提到您应该执行<CommentItem likeComment={this.likeComment} userID={user.id} /> ，而不是执行<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 ，他referning到这里是对象的引用，你知道{} === {}是false

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

(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。