javascript - React，为每个事件绑定(bind)新函数的效率低下

Question

我和我的 friend 吵架了。为了全面披露，我是 React 及其好处的忠实粉丝。

在 React 组件中，当将 DOM 事件附加到元素列表中的每个元素时，传统模式是 bind() 通用点击处理程序以及您要传递给它的值函数作为参数。如下所示:

<button onClick={this.onButtonClick.bind(this, buttonIndex)}></button>

其中 buttonIndex 是随着按钮列表被迭代而改变的一些值。此模式允许 onButtonClick 是通用的，并期望 buttonIndex 作为参数。像这样:

onButtonClick: function(buttonIndex) {
   ... some logic
}

我的 friend 认为这种做事方式效率极低。这需要创建一个新函数并将其保存在内存中以处理每个按钮的事件。我同意他的观点，但我觉得 React 开发者不会鼓励这种模式 in their docs , ( at least twice ) 如果库没有有效地处理事件及其处理程序。

他用来避免这种情况的模式是使用 data- 属性并从 DOM 元素本身获取值(在本例中为 buttonIndex):

<button data-buttonIndex={buttonIndex} onClick={this.onButtonClick}></button>

...

onButtonClick: function() {
   var buttonIndex = $(this).data('buttonIndex');
   ...some logic
}

同样，我有偏见，因为我是 React 的粉丝。但这感觉不对，原因有二:

1. 从 DOM 中获取值以传递数据(作为 state)在很多方面有点违背 React 的目的，对吧？
2. data- 属性在我看来非常模糊。它们可以从几个不同的地方(HTML、JS、PHP 等)进行设置。他们没有暗示任何隐含的目的。该“数据”可以在任何地方使用(JS、CSS 等)

React 是否使用了一些特殊的魔法来使其 DOM 事件变得高效？如果没有，是否有替代模式不使用 data- 属性并且更明确地说明它的使用？

Answer 1

我认为一般来说，直接在 render 中绑定(bind)函数是惯用的方式，因为正如您所指出的那样，他们在文档中这样做，而且根据我们的经验，性能并没有明显降低。但是，有些情况下您不想在每次渲染时都重新绑定(bind)该函数，例如，如果您在 shouldComponentUpdate 中比较 Prop (例如 PureRenderMixin)。要按照您 friend 的建议做一些非常相似的事情，但无需使用 jQuery 查看 DOM(我相信这是一种常见模式)，您可以将索引作为 Prop 传递。

class Parent extends React.Component {
  render() {
    return [...some array].map((item, index) => {
      return <Child item={item} index={index} />;
    });
  }
}

class Child extends React.Component {
  constructor() {
    super();
    this.handleClickButton = this.handleClickButton.bind(this);
  }

  handleClickButton() {
    // use this.props.index here
  }

  render() {
    return <button onClick={this.handleClickButton}></button>;
  }
}

请注意，当您使用 ES6 类时，您需要在构造函数中手动绑定(bind)到 this，因为您正在访问 this.props。如果您使用的是 React.createClass，则不需要。 More about ES6 classes in React docs here.