反應 - 優雅的方式來重新渲染只有一個孩子組件？

我正在研究一個表格組件。當我左右滾動的<tbody />我希望它更新的只是<theader />這是一個單獨的組件，我會打電話<Header Component />的X偏移。結構如下：反應 - 優雅的方式來重新渲染只有一個孩子組件？

<Parent Component > 
    <Header Component /> 
    <Very Expensive Body divs/> 
    <Very Expensive Body divs/> 
    <Very Expensive Body divs/> 
</Parent Component >

滾動監聽器在父組件上，而xOffset是父組件狀態的一部分。當我向左和向右滾動時，它也重新渲染重新渲染身體組件非常昂貴。

什麼是我的只是標題組件重新渲染選項？

1）使用終極版和選擇。父組件將xOffset分派到應用程序狀態，<Header Component />只在選擇器上偵聽。看起來像是過度殺傷...

2）我將所有<Very Expensive Body Comp divs >分解成它們自己的組件，並使用ShouldComponentUpdate，以便在除xOffset之外的所有內容都保持不變的情況下不會重新呈現。這看起來似乎不是矯枉過正，但我覺得我將處理同樣的問題，因爲我必須將滾動偵聽器放在這個新組件上，然後使用父組件作爲中介。 oof。

是否有第三種更好的解決方案？

我希望有一種方法可以將函數傳遞到<Header Component />，這樣當父元件向左和向右滾動時，它會使用該函數更新<Header Component />的狀態，這會導致它重新呈現。

來源

2017-03-31 NateW

選項編號2！把你非常昂貴的div標籤分解成他們自己的組件，並使用shouldComponentUpdate。保持一個render()函數內的所有元素不會像您開始看到的那樣好。使用React的全部好處是您可以創建簡單的可重用組件並使用這些組件構建更復雜的UI。您似乎有意將所有內容都保存在一個組件中，但這實質上是React中的反模式。

然而，做不一個新的滾動監聽器添加到每個組件。相反，只需像你一樣將它保留在父組件上，並將滾動值作爲道具傳遞給所有新組件。如果他們只需要在滾動一定數量的屏幕後進行更改，則可以在每個兒童的shouldComponentUpdate功能中更新它。

來源

2017-03-31 18:15:57

嗯，你是對的我不會把一個scrollListener放在新組件上。您是否發現選項1有任何問題？ – NateW

我同意這個答案。我在OP中並沒有真正理解這一點：「這看起來不像是矯枉過正，但我覺得我會處理同樣的問題，因爲我必須將滾動監聽器放在這個新的組件...然後使用父組件作爲中介.. oof。「但是，如果這適用於你的用例，我會走這條路。 – Aaronius

@Aaronius抱歉應該澄清。該表體位於組件內部並且可滾動。我正在考慮如果我將''分成了它自己的組件，我必須使該組件可滾動而不是父組件，然後才能在和之間進行通信，我必須通過父組件。但我認爲我錯了那個哈哈。 – NateW

如果我理解正確的，一個選擇是像做：

<Parent Component > 
    <Header Component /> 
    { this.getVeryExpensiveBodyDivs() } 
</Parent Component >

而且具有getVeryExpensiveBodyDivs生成和緩存的div的第一次，然後從高速緩存剛剛訪問它們之後，如果他們在緩存。緩存只是一個實例變量（this.cachedVeryExpensiveBodyDivs）。

然後，在你的表格組件的componentWillReceiveProps，你可以檢查任何道具改變了這一切應該影響非常昂貴的身體div的。如果道具變化會影響非常昂貴的身體區域，請清除緩存。下次調用getVeryExpensiveBodyDivs時，它會重新生成並重新緩存div。

來源

2017-03-31 18:08:02 Aaronius

Inninttteerressting！從未考慮過這樣的事情。偉大的建議！ – NateW

反應 - 優雅的方式來重新渲染只有一個孩子組件？

回答

相關問題