我应该在 React JS 中使用自定义事件委托吗答案

【问题标题】：Should I use custom event delegation in React JS我应该在 React JS 中使用自定义事件委托吗
【发布时间】：2015-11-16 16:31:55
【问题描述】：

React 使用事件委托，如文档 here 中所述：

事件委托：React 实际上并没有将事件处理程序附加到节点本身。当 React 启动时，它开始使用单个事件侦听器在顶层侦听所有事件。安装或卸载组件时，只需从内部映射中添加或删除事件处理程序。

我有一个非常常见的场景，我有一个项目列表，我希望每个项目都有一个事件处理程序，我应该使用我的自定义事件委托并从事件对象访问目标元素来执行逻辑，还是应该附加单个事件侦听器回调每个列表项并依靠 React 来处理性能。

【问题讨论】：

我不确定你所说的“我的自定义事件委托”是什么意思，你能举个例子吗？
“自定义事件委托”是指在列表项的父元素而不是单个项上添加事件侦听器。
我不太明白 - 这有什么习惯？
正如您的引述所说，如果您监听每个项目，反应根元素上仍然只有一个事件。我不确定拥有更小的内部映射结构是否有很多好处 - 你的列表有多大？
它的动态，可能达到500-100个元素左右

标签： javascript reactjs

【解决方案1】：

将事件处理程序附加到每个。您可能会考虑分页列表，大多数显示器一次不会显示 500-1000 个项目。

class SnipListItemRender extends React.Component {
  render() {
    let SnipSpanSty = {width: 'calc(70% - 142px)'};
    SnipSpanSty.color = (this.props.index === this.props.selectedKey) ? '#b58900' : '#afac87';
    return (
      <div id='SnipDivSty' onclick={this.snipClickHandler} className="FlexBox" style={SnipDivSty}>
        <div id='SelectSnipDivSty' style={SelectSnipDivSty}>
          <JButton btn={selectSnipBtn} parentClickHandler={this.snipClickHandler} />
        </div>
        <span id='SnipSpanSty' style={SnipSpanSty}>{this.props.snippet.snip}</span>
        <JButton btn={SnipBtn} parentClickHandler={this.snipClickHandler} />
      </div>
    );
  }
}

class SnipListItem extends SnipListItemRender {
  snipClickHandler = (buttonid) => { Actions.selectSnipItem(this.props.snippet, buttonid); }
}

let _snipDataMap = function(snip, index) {
  return (
    <li id='SnipsDivLiSty' key={index} style={SnipsDivLiSty}>
      <SnipListItem snippet={snip} index={index} selectedKey={this.props.selectedKey} />
    </li>
  );
}

export default class SnipsView extends React.Component {
  render() {
    let list = this.props.data.map(_snipDataMap, this)
    return (
      <div id='SnipsDivSty' style={SnipsDivSty}>
        <ul id='SnipsDivUlSty' style={SnipsDivUlSty}>
          {list}
        </ul>
      </div>
    );
  }
}

【讨论】：

【解决方案2】：

如果您的custom event delegation 表示在事件中有自定义数据，你不应该这样做。因为它违背了 React 的哲学。

引入新的数据流
- React 更喜欢单向数据流
引入了隐式依赖
- React 更喜欢将数据和函数传递给 props。所有依赖项都应该是明确的

更多详情可以阅读this

【讨论】：