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中获取值以传递数据（如状态）有点在很多方面违背了React的目的，对吗？
data-属性非常含糊不清。它们可以从几个不同的地方设置（HTML，JS，PHP等）。他们并没有暗示任何隐含的目的。那＆＃34;数据＆＃34;可以在任何地方使用（JS，CSS等）

React是否会通过其DOM事件做一些特殊的魔术？如果没有，是否有一种替代模式不使用data-属性并更明确地使用它？

Answer 1

我认为通常直接在render中的绑定函数是惯用的方式，因为它们在您指出的文档中进行，并且根据我们的经验，其性能并没有明显降低。但是，有些情况下您不希望在每个渲染上重新绑定该函数，例如，如果您要比较shouldComponentUpdate中的道具（例如PureRenderMixin）。要做一些与朋友建议非常相似的事情，但不用jQuery查看DOM（我相信这是一种常见的模式），你可以将索引作为道具传递。

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中查找任何内容时的性能成本。

我不认为我曾经描述过并发现在渲染中创建函数是一个问题。这绝对是你应该在数字告诉你的时候优化的东西。

反应，为每个事件绑定新函数的效率不足

2 个答案: