Question

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

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

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

Answer 1

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

＆＃13;

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>
    );
  }
}

＆＃13;

Answer 2

如果您的custom event delegation表示在活动中拥有自定义数据，你不应该这样做。因为它违背了React的理念。

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

有关详情，请参阅this

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

2 个答案: