我應該使用道具還是狀態來存儲TreeView數據？

我正在學習反應，我正在嘗試創建一個TreeView組件。這個TreeView可以接收數據本身（通過'數據'道具）或作爲一個URL到其他資源。我在這裏專注於最後一個選項。我應該使用道具還是狀態來存儲TreeView數據？

組件首先呈現爲「加載」狀態，並且ajax調用是在componentDidMount上進行的。當數據從REST服務返回時，我只是將它分配給組件的'props.data'和setState（{loading：false}），並且它正確地呈現填滿的樹。

這裏的一個問題是，我從組件本身變異的道具是一種反模式，但它也不適合將數據添加到狀態。我傾向於將狀態視爲與UI交互相關，並將其用於「摺疊」或「選定」之類當更新父組件（包含TreeView的組件）時，TreeView的'data'prop被重置（componentDidMount未被調用所以它甚至不會被再次提取）和組件中斷。使用'狀態'解決了這個問題，因爲它在此父級重新呈現過程中保留了值。

應該在這裏使用狀態？有沒有更好的模式呢？

除了從服務器檢索數據還有改變樹數據本身的問題（如移動樹項目沒有其他地方）現在我只是改變'props.data'中的項目，並強制更新相關的內部組件。

我應該只是在TreeView根組件中使用state和setState，並讓它再次區分整個事物嗎？這是一棵相當大的樹...... 我是否應該將樹包裹在一些其他將傳遞數據的數據組件中？

有人可以幫助找到構建此組件的最佳方式嗎？感謝和聖誕快樂:)

來源

2014-12-24 RuiFortes

你可以調用父組件的componentDidMount方法您的REST服務（含TreeView一）和樹數據設置爲父組件的狀態。通過這種方式，您不會自己變更組件的道具，並且父組件更新不會重置Treeview's數據。（更好的做法是使用Flux商店存儲和讀取數據，並通過控制器觀點，即數據傳遞到您TreeView）

至於改變樹數據本身，您可以在父組件定義回調函數和調用這些當數據改變時，來自TreeView的函數。實際的數據分配發生在父組件的回調函數中。這會導致父組件重新渲染TreeView。（更好的做法是調用父組件中的Flux動作來更改保存在商店中的數據，然後傳播到視圖。）

來源

2014-12-24 12:11:22 nilgun

我應該使用道具還是狀態來存儲TreeView數據？

回答

相關問題