Question

我使用的是React，但这不一定是React特定的问题。

在事件处理程序中抓取自定义数据属性之间是否存在重大差异

<MyElement greeting="hello" farewell="goodbye" />

//MyElement component
handleClick(event) {    
  console.log(event.currentTarget.dataset.myData);
}
...
<li data-my-data={this.props.greeting} onClick={this.handleClick}>Click Greeting</li>
<li data-my-data={this.props.farewell} onClick={this.handleClick}>Click Farewell</li>

并将值绑定到事件处理程序

<MyElement greeting="hello" farewell="goodbye" />

//MyElement component
handleClick(myData) {
  console.log(myData);
}
...
<li onClick={this.handleClick.bind(this, this.props.greeting)}>Click Greeting</li>
<li onClick={this.handleClick.bind(this, this.props.farewell)}>Click Farewell</li>

这仅仅是个人偏好的问题，还是每个人都有实际的利弊？

Answer 1

简短回答：这是个人偏好的问题，每种解决方案都有Pro和Con。恕我直言选项1是反应设计原则的捷径，可以在以后遇到很多麻烦。

PRO选项1：将数据“存储”在DOM数据集中：

组件中较少繁琐的绑定内容
数据集也可以从反应组件外部访问;其他组件/代码可以直接读取/更新数据集

PRO选项2：将数据“存储”在反应javascript组件中

如果传递的目标是正确的DOM节点，则不必担心。（event.currentTarget使用事件侦听器获取第一个更高的组件，event.target获取单击的元素）
数据集只能从内部反应组件访问，保持代码清洁

我个人的偏好是选项2：它强迫您坚持反应数据流和设计原则，并将所有相关代码保存在javascript react组件内的相同位置。

这可以保护您免受下列地狱之路的影响（特别是在大型项目和大型团队中普遍存在）：

新要求：某些远程组件需要访问数据集
反应组件树的正确重新设计是繁琐的：您可能需要将数据集的管理移动到更高的组件以访问数据集，这意味着修改反应组件树。
但是有一个快捷方式：远程组件也可以直接从DOM读取 - 所以请选择快速而肮脏的解决方案
新要求：原始组件需要更新
现在无法找出实际读取/依赖数据集的其他组件，因此您的代码实际上变得无法管理。

Answer 2

使用ES6箭头功能这样做：

<li onClick={()=>this.handleClick(this.props.greeting)}>Click Greeting</li>

这比bind更干净，更高效，并且所需的代码少于选项（1）。

只有（潜在）缺点是在这种情况下，每次在render（）期间创建新的函数对象。当您将回调传递给依赖于shouldComponentUpdate（）优化的自定义组件时，这只会是问题所在。在这种情况下，选项（1）应该是最好的，因为你应该避免动态创建的闭包。

使用自定义数据属性处理事件或将数据绑定到处理程序？

2 个答案: