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

Handling event using custom data attributes or binding data to the handler?

本文关键字：处理 程序 处理事件 数据绑定 自定义 数据属性      更新时间：2023-09-26

我正在使用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>

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

简单回答：这是个人偏好的问题，每个解决方案都有Pro和Con。IMHO选项1是反作用设计原则的捷径，这可能会让你以后遇到很多麻烦

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

  • 在组件中绑定内容不那么繁琐
  • 数据集也可以从react组件外部访问；其他组件/代码可以直接读取/更新数据集

PRO选项2：将数据"存储"在react javascript组件中

  • 如果传递的目标是正确的DOM节点，那么就不用担心了。（event.currentTarget采用具有事件侦听器的第一个更高级别组件，event.target采用单击的元素）
  • 数据集只能从react组件内部访问，使代码更干净

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

这可以保护您免于以下地狱之路（尤其是在大型项目和大型团队中）：

  • 新要求：一些远程组件需要访问数据集
  • 对react组件树进行适当的重新设计是乏味的：您可能需要将数据集的管理转移到更高的组件来访问数据集，这意味着对react构件树进行修订
  • 但是有一个快捷方式可用：远程组件也可以直接从DOM中读取，所以选择快速而肮脏的解决方案
  • 新要求：原始组件需要更新
  • 现在，无法找出哪些其他组件实际读取/依赖于数据集，因此您的代码实际上变得无法管理

这样做，使用ES6箭头函数：

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

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

唯一（潜在的）缺点是，在这种情况下，每次render（）过程中都要创建新的函数对象。只有当您将回调传递给依赖shouldComponentUpdate（）优化的自定义组件时，才会出现问题。在这种情况下，选项（1）应该效果最好，因为您应该避免动态创建闭包。

相关文章：