使用参数绑定点击处理程序的“React - ES6方式” [英] 'React - ES6 way' of binding click handlers with parameters

问题描述

我读过很多关于使用（）=>的文章。 {} 语法，在构造函数中绑定，在props等中绑定..但据我所知，绑定这个在性能上是代价高昂的，并且使用箭头函数进行自动绑定非常昂贵，因为它每次都会创建一个新的匿名函数。

I've read a bunch of articles about the use of () => {} syntax, binding in the constructor, binding in the props etc.. but from what I understand, binding this is costly performance-wise, and doing automatic binding with arrow functions is costly because it creates a new anonymous function every time.

那么处理性能最好的反应方式是什么这个问题？

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

Binding in the constructor seems to work well for functions that don't need to pass parameters, like this:

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

但我们如何处理传递params的绑定函数，而不将其绑定在prop中，如这个：

but how do we handle binding functions that pass params, without binding it in the prop, like this:

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

在构造函数中绑定 this 然后在prop中导出绑定 null 或 undefined 只能绑定一次的绑定函数？

Does binding this in the constructor and then binding null or undefined in the prop result in a bound function that only binds once?

如果有任何误解，请随意纠正我。看起来这个问题的解决方案应该更为人所知并且更具普遍性......那就是我不仅仅是生活在摇滚之下！

Feel free to correct me in any misconceptions I have. It seems like the solution to this problem should be more well-known and universal... that is if I haven't just been living under a rock!

编辑：

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

Even with abstraction, doesn't the click handler get bound with every single item render?

，他们将此示例提供给避免绑定点击处理程序，但是因为React.createClass对方法进行了自动绑定，我看不出它是如何实际绑定每个项目渲染的？

in the article here, they give this example to avoid binding the click handler, but because React.createClass does autobinding of methods, I don't see how this is not actually binding on every item render?

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中的自动绑定，它仍然存在吗？

Can someone explain this? Doesn't this just look like it avoids binding every ListItem render, but because of autobinding in React.createClass, it still does?

我试过这个例子使用类List扩展Component 语法而不是createClass，并且 this.handleClick 未定义，因为handleClick方法不是绑定到类。

I tried this example with class List extends Component syntax instead of createClass, and this.handleClick was undefined, because the handleClick method wasn't bound to the class.

在一天结束时，它似乎只是清除了详细程度，并且实际上并没有通过减少方法绑定来提高性能...

At the end of the day, it appears that this just cleans up verbosity, and doesn't actually improve performance by reducing method binding...

推荐答案

对于< li onClick = {this.handleClick.bind（this，item.id） ）} />{item.name}</li>

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

this typically means you need another layer of abstraction IE a new react component that returns the same element but you can pass in the onClick as a prop as well as item id as a prop. Then in that component you would call this.props.onClick(this.props.id) or however you format the data.

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

this article draws out all the differences between each way of binding instance methods as well as how each impacts performance https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56#.

这篇关于使用参数绑定点击处理程序的“React - ES6方式”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！