React，为每个事件绑定新函数的效率低下

Question

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

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

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

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

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

我的朋友认为这种做事方式效率极低。这需要创建一个新函数并将其保存在内存中以处理每个按钮的事件。我同意他的观点，但我觉得如果库没有有效地处理事件及其处理程序，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 的粉丝。但这感觉不对，原因有二：

从 DOM 中获取值来传递数据（如 state）在很多方面都违背了 React 的目的，对吗？
data- 属性在我看来非常模糊。它们可以从几个不同的地方设置（HTML、JS、PHP 等）。他们没有暗示任何隐含的目的。 "data" 可以在任何地方使用，（JS、CSS 等）

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

Answer 1

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

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 类时，您需要在构造函数中手动绑定到 this，因为您正在访问 this.props。如果您使用 React.createClass，则不需要。 More about ES6 classes in React docs here.

Answer 2

我不确定这是个好主意，但是...记住！

class Foo {
  constructor(){
    this.getClickHandler = _.memoize(this.getClickHandler);
  }

  getClickHandler(index){
    return (event) => {
      doSomething();
    };
  }

  render(){
    // ...
       <button onClick={this.getClickHandler(index)}>Click me</button>
    // ...
  }
}

这样您就可以避免创建新函数，避免数据属性，并避免在 dom.

中查找任何内容的性能成本

我不认为我曾经分析过并发现在渲染中创建函数是一个问题。这绝对是你应该优化的东西，只有当数字告诉你这样做时。

React，为每个事件绑定新函数的效率低下

React, ineffiencies of binding a new function for each event

javascript

dom-events

reactjs