使用参数绑定点击处理程序的"React - ES6方式"

Question

我已经阅读了很多关于() => {}语法的使用,构造函数中的绑定,道具等中的绑定等等的文章.但据我所知,绑定this在性能上是昂贵的,并且使用箭头函数进行自动绑定是昂贵的,因为它每次都会创建一个新的匿名函数.

那么处理这个问题的最有效的"反应方式"是什么？

构造函数中的绑定似乎适用于不需要传递参数的函数,如下所示:

constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
}

但是我们如何处理传递params的绑定函数,而不是在prop中绑定它,如下所示:

<li onClick={this.handleClick.bind(this, item.id)} />{item.name}</li>

是否结合this的构造函数,然后结合null或undefined在绑定功能,只有结合曾经在道具结果？

如果我有任何误解,请随意纠正我.似乎这个问题的解决方案应该更为人所知并且更具普遍性...即如果我不仅仅生活在一块岩石下面!

编辑:

即使使用抽象,点击处理程序也不会与每个项呈现绑定？

在这里的文章中,他们给出了这个例子以避免绑定click处理程序,但是因为React.createClass对方法进行自动绑定,我不知道这对于每个项目渲染都没有实际绑定吗？

var List = React.createClass({
  render() {
    let { handleClick } = this.props;
    // handleClick still expects an id, but we don't need to worry
    // about that here. Just pass the function itself and ListItem
    // will call it with the id.
    return (
      <ul>
        {this.props.items.map(item =>
          <ListItem key={item.id} item={item} onItemClick={handleClick} />
        )}
      </ul>
    );
  }
});

var ListItem = React.createClass({
  render() {
    // Don't need a bind here, since it's just calling
    // our own click handler
    return (
      <li onClick={this.handleClick}>
        {this.props.item.name}
      </li>
    );
  },

  handleClick() {
    // Our click handler knows the item's id, so it
    // can just pass it along.
    this.props.onItemClick(this.props.item.id);
  }
});

有人可以解释一下吗？这不是看起来像它避免绑定每个ListItem渲染,但由于React.createClass中的自动绑定,它仍然吗？

我用class List extends Component语法而不是createClass 尝试了这个例子,并且this.handleClick未定义,因为handleClick方法没有绑定到类.

在一天结束时,似乎这只是清除了冗长,并且实际上并没有通过减少方法绑定来提高性能......

Answer 1

为您 <li onClick={this.handleClick.bind(this, item.id)} />{item.name}</li>

这通常意味着你需要另一层抽象IE一个新的反应组件返回相同的元素,但你可以传入onClick作为prop以及item id作为prop.然后在该组件中,您可以调用this.props.onClick(this.props.id)或者格式化数据.

本文阐述了绑定实例方法的每种方式之间的所有差异,以及每种方式如何影响性能https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56#.

Answer 2

如果传递参数,则必须在render函数中绑定而不是在构造函数中绑定.这可以使用bind或arrow函数完成.

<li onClick={this.handleClick.bind(this, item.id)} />{item.name}</li>

要么

<li onClick={() => this.handleClick(item.id)} />{item.name}</li>