将事件处理程序推送到父组件

Question

例如，如果我有一个电子表格并且想要将处理程序附加到单元格以处理用户交互。通常，您会将处理程序附加到单元格组件本身。但是，如果您要创建数千个单元格，这似乎效率很低。

如果我有一个组件层次结构，其中 SheetComponent -> CellComponents 如何将单个处理程序附加到 SheetComponent 以处理每个单元格交互？当用户交互时，我想访问 CellComponents props 以确定点击的是哪个。

Answer 1

DOM 事件，当使用 React 时是合成的……它们都在文档级别处理，然后在所有处理程序中合成。因此，对于 DOM 事件，处理程序尚未附加到每个事件的每个元素。但是，这仍然意味着存在无法避免的开销，因为需要通知您的组件发生了事件。

要从 CellComponent 与 SheetComponent 通信，您可以简单地将自己的事件添加为属性：例如 onCellActivated。如果你有多个事件，你可以有一个通用事件，而不是需要连接很多事件，你可以有一个参数设置为事件类型的通用事件：

 onCellEvent({ eventType: 'activation', cell: this })

该模式开始看起来更像是遵循 Flux 模式的 Action Creator/Action（当然没有 Dispatcher 和 Store）。

您可以使用 Flux/Action/Dispatcher 模式将关键事件中继到集中位置（如 SheetComponent），然后从那里处理交互，而不是依赖于您自己的事件。调度操作后，您将包含有关发生交互的单元格的关键信息。

但是，您可能想先测试更传统的事件模型的性能，因为这可能会增加额外的复杂性，而实际好处很少。

您可能还想从为 React 编写的 Facebook's Fixed Data Table 组件中获得一些灵感。它旨在有效地处理数千行数据。

Pushing event handlers to parent components