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

Pushing event handlers to parent components

本文关键字：组件事件处理程序更新时间：2024-01-15

例如，如果我有一个电子表格，并且希望将处理程序附加到单元格以处理用户交互。通常，您会将处理程序附加到单元组件本身。但是，如果你正在创建数千个细胞，这似乎相当低效。

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

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

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

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

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

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

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

你可能还想从Facebook为React编写的固定数据表组件中获得一些灵感。它的设计可以有效地处理数千行数据。