2016-10-01 75 views
2

我有一個關於在哪裏加載Reactjs數據的一般性問題。Reactjs - 數據流

主要組件被稱爲應用程序。然後,該應用程序返回3個組件:標題,正文和頁腳。現在在Body中,有一個Tab組件,它被進一步細分爲幾個組件,包括一個名爲「網格」的組件。

現在我想要我的數據(在過濾後)顯示在網格中。

請糾正我,如果我做錯了,但我的想法是:

  1. 加載數據的主要成分爲應用程序狀態:

    <Body data={this.state.data} /> 
    
  2. 它傳遞給車身

  3. 在主體部件,還通過它爲:

    <Tabs data={this.props.data} /> 
    
  4. 在選項卡組件,進一步將它作爲:

    <Grids data={this.props.data} /> 
    
  5. 在網格,寫所有過濾數據和顯示/相應地返回它的方法。

這是正確的嗎?

謝謝

回答

1

您列出的流程是正確的。另一種方法是使用context:任何設置到一個組件上下文中的內容都可用於該組件的每個後代,而不需要設置中間組件的道具。

Context comes with a warning though

使用上下文會使你的代碼更難理解,因爲它 使數據流不太清楚。它類似於使用全局變量 來傳遞狀態通過你的應用程序。

順便說一句,爲了管理數據,我會使用Flux或Redux之類的東西。在應用程序增長時,直接在React組件內直接管理數據很快就會成爲一種痛苦。另一方面,Flux/Redux的伸縮性非常好。

+0

謝謝downvote,謹慎解釋你爲什麼不同意? – craftsman

+0

是的。我一直在看Redux,但還沒有得到我的頭。 – Wasteland

+0

本課程適用於我:https://egghead.io/courses/getting-started-with-redux – craftsman