2016-09-26 88 views
1

我正在構建一個非常大的應用程序,並希望根據根組件狀態更改重新呈現應用程序的最佳方式。在根狀態改變後重新安裝所有反應的子組件

範例架構

<Route path="/" component={App}> 
<Route component={Layout}> 
    <IndexRoute component={Page} /> 
    <Route path={page} component={Page}></Route> 
    ... 
</Route> 
<Route component={Layout}> 
    <IndexRoute component={Page} /> 
    <Route path={page} component={Page}></Route> 
    ... 
    </Route> 

在我的建築成功登錄後,我存儲在我的應用程序組件的用戶數據。每個用戶都有一個客戶端密鑰,用作要顯示哪些客戶端數據庫/數據的標識符。我想要完成的行爲是在客戶端更改後使用新客戶端數據更新當前頁面。

現在我可以將我的數據傳遞給我的組件作爲我的應用程序組件中的道具,但是我認爲這會因爲兩個原因而效率低下。

  1. 我必須在呈現我的App組件之前獲取我所有路線的數據。
  2. 我的數據會變成「陳舊」,直到我重新呈現我的應用程序組件。

由於這些原因,我決定讓每個頁面使用componentWillMount生命週期鉤子獲取它自己的數據,並將數據作爲道具傳遞給頁面子組件。這適用於我,因爲我可以在導航時爲每個頁面獲取新數據。

我目前遇到的是,客戶端更改我的應用程序後重新呈現,但由於我的當前頁面已經掛載它不會獲取新的客戶端數據。但是,如果我離開當前頁面並返回到頁面,所有內容都按預期工作。

我想到的一個解決方案是將用戶數據傳遞給每個頁面,並使用componentWillReceiveProps生命週期鉤子並執行比較檢查以獲取新數據。我想盡可能地防止這種情況發生,因爲我的申請將有40多頁。

任何建議將不勝感激。

回答

2

你提到什麼

傳遞用戶數據到每個頁面,並使用 componentWillReceiveProps生命週期掛鉤,並以獲取新的數據進行比較 檢查。

非常好。在野外這種模式的幾個例子:

+0

我知道這種模式的工作原理,但隨着必須將'componentWillReceiveProps'生命週期鉤子添加到每個頁面,我必須手動將App組件狀態映射到頁面佈局和頁面。 這將需要我使用這樣的東西 '{React.cloneElement(this.props.children,{user:this.state.user})}''。 在我看來,這開始影響可維護性,也可能意味着可能有更好的做事方式。正如[評論]所述(https://github.com/ReactTraining/react-router/issues/1857#issuecomment-181042069) – Kwame

相關問題