從子組件收集數據

Question

對於我的第一個React應用程序，我需要顯示帶有組項目，讀取項目和寫入項目的菜單層次結構（還有更多，但對於此示例來說就足夠了）。

每個讀取項目和寫入項目都連接到JSON API中的數據點：每個項目都有一個資源（例如/api/1.0/fruits）和一個json路徑（例如data.color）。

當顯示菜單時，應從Web服務中提取所有值。但我不希望每個項目都獨立取值，因爲在典型情況下，相同的資源將被多次讀取。

我有一個靜態的，無狀態的菜單結構以及視圖的構建。我可以在這個菜單結構的根菜單項上調用一個方法getRequiredResources()，它將返回一組資源。

但後來我引入了動態菜單項，所以根據菜單項的狀態需要不同的資源。我不能再使用靜態菜單結構來收集所有需要的資源，因爲它不瞭解每個項目的狀態。

有關如何處理此問題的任何提示？如果我可以訪問子菜單項組件，它們擁有足夠的狀態以返回所需資源的列表，但我不認爲這是推薦的模式...？

我使用Flux體系結構進行數據流。

Answer 1

在組件樹中維護狀態儘可能高是一種很好的做法。你的情況最好的解決方案取決於菜單結構的動態條件，來源：

• 如果這些動態條件來自外界（比如他們是否沒有用戶登錄）：
  • 將狀態置於頂層菜單組件中，包括有關其子組件狀態的所有信息。
  • 然後頂層組件仍然可以獲取所有數據並呈現動態菜單。
  • 這保持您只需取一次菜單數據的要求。
  • 爲此，您需要維護商店某處的菜單狀態信息，以傳遞到頂層組件。
• 如果動態條件從菜單項內（比如他們複選框或過濾器裏面的菜單子項）
  • 給孩子組件的狀態，讓每個孩子取自己的東西基於在那個狀態。 （從加載狀態開始，獲取項目並重新渲染）。
  • 在這種情況下，您可能會獲取相同的數據兩次（因爲孩子之間沒有交流。
• 如果動態條件從菜單中組件和你數據集不是過大或過於複雜的（聽起來像這樣不符合你的需求）來源：
  • 你可以仍然可以獲取頂部的所有內容，並且僅在兒童內部使用狀態進行過濾。
• 如果動態條件從菜單內起源，但你要保存狀態的地方（例如，當用戶再次訪問頁）：
  • 然後保持狀態在頂部的組件，以及像所有動態的孩子一樣。
  • 孩子們都是無國籍的，他們都是道具。
  • 只要在孩子的內部設置過濾器或類似設置，該孩子就會向調度員發出一個動作。然後您需要在商店的某個地方保存您的過濾條件。