2014-10-27 68 views
1

我正在实施甘特图编辑作为React.js组件的集合。我正在努力在交互过程中如何在组件之间进行通信。例如,当甘特图中的一个条被拖动时,我想更新从属条。从属酒吧在DOM中可能没有父子关系 - 所以我需要能够在相对不相关的组件之间进行通信,以便将依赖酒吧重新呈现在新位置。在不同子树中的注释之间进行通信

我试图在顶级的setState,让变化在层次结构向下传播,但是这是过于缓慢而当有很多的在屏幕上拖动吧。

让每个酒吧/组件注册事件处理似乎是因为每一个很大的开销就需要注册一个处理器不同的事件(因为我只想更新需要重绘棒)。

如果我能得到一个“指针”到一个组件实例,我可以暂时存储在图形数据结构存储棒。然后我可以只调用需要更新的组件的setState。

事件是否真的是这种情况的正确解决方案?

+0

如果你不能使用更新孩子的父容器,你可以尝试使用类似邮政的东西。 https://github.com/postaljs – zackify 2014-10-27 22:34:04

+0

当你说,“这太慢了”,是从实际测试它? – 2014-10-28 16:18:49

+0

@ssorallen是的,我首先在根节点上使用setState来实现它。拖动一个栏时,所有其他组件的重新渲染足以使拖动有太多滞后。当我优化为仅重新渲染要移动的栏时,拖动的栏与光标保持正确。 – Chris 2014-10-28 20:11:33

回答

0

嗯,我忍辱负重,实施了基于pub/sub解决方案,它并不像我预想的那样丑陋。事实上,我可以看到它提供的解耦优势 - 现在我已经拥有基础架构,可以从代码中的许多其他位置触发更新。

+0

您是否使用任何图书馆作为发布/订阅实施方案,还是使用本地方法? – tirdadc 2015-01-23 14:46:52

+0

@tirdadc我使用https://github.com/krasimir/EventBus。 – Chris 2015-01-31 05:40:19

+0

只是想知道你是否曾经用flux/redux等修改过你的甘特图 – vittore 2016-03-10 04:48:22

相关问题