2014-10-27 30 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

相關問題