Javascript 向React中的大量元素添加事件侦听器

我有一个

CategoryPicker

组件，它显示一个大的类别树（层次结构，大约20000个节点），每个节点都绑定到一个

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

const CategoryPicker=React.createClass({
render（）{
返回(
//数据包含大约20000个元素
{data.map（（d）=>{
返回(
{d.cateName}
);
});}
);
}
});

更新

---

我已经尝试在节点上删除

onClick

事件处理程序，性能提升是显而易见的。我想我现在必须使用jQuery方法来处理这种情况。

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

---

如果出于某种原因，你想避免这一点，也要考虑“代码>绑定< /代码>本身将导致大量开销。基本上，您正在为每个组件创建一个新函数。

我今天遇到的代码到处都是这种“在父项上单击冒泡，在子项上单击数据属性”的策略。读起来很痛苦。

---

我建议使用react table这样的虚拟渲染系统，只渲染用户可见的少数类别。你得到了一个真正的性能提升，因为你根本不需要渲染20000个div中的90%。解决了绑定函数占用内存的事件侦听器问题

只需将其绑定到父级/祖先级，并使事件冒泡。我不使用react，为什么它违背了设计理念？看起来很奇怪。只是快速检查一下：删除事件处理程序-它仍然很慢吗？还要检查一下：即使渲染20000个节点也会有点慢。我还会尝试删除bind@ColinRamsay删除处理程序确实提高了性能