Question

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

如果我有一个组件层次结构，其中SheetComponent - ＆gt; CellComponents如何将单个处理程序附加到SheetComponent以处理每个单元格交互？当用户进行交互时，我希望能够访问CellComponents道具，以便识别被点击的内容。

Answer 1

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

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

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

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

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

但是，您可能希望首先测试更传统的事件模型的性能，因为这可能会增加额外的复杂性而几乎没有实际的好处。

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