在React中为大量元素添加事件侦听器

Question

我有一个CategoryPicker组件，它显示一个大的类别树（层次结构，大约20,000个节点），每个节点都绑定到onClick事件处理程序，以便找出用户的哪个节点正在点击。

安装此组件时结果非常慢，分析结果显示EventPluginHub.putListener占用了大部分资源。

我能想到的唯一解决方案是使用jQuery将事件处理程序绑定到它的祖先，你知道，旧的学校方式。但显然这违反了React的设计理念。

const CategoryPicker = React.createClass({
  render() {
    return (
      // data has about 20,000 elements
      {data.map((d) => {
        return (
          <div onClick={this.handleClick.bind(this, d.cateId)} key={d.cateId}>
            {d.cateName}
          </div>
        );
      });}
    );
  }
});

更新

我尝试在节点上删除onClick事件处理程序，性能提升很明显。猜猜我现在必须使用jQuery方法来处理这种情况。

Answer 1

理想情况下，您应该将事件处理程序附加到父组件（只使用react，不需要jquery）并让这些事件冒出来。然后，您可以使用传递的事件对象来确定单击了哪个组件。

如果由于某种原因你想避免这种情况，还要考虑bind本身会导致很多开销的事实。您实际上是在为每个组件创建一个新函数。