反應：防止父母重新申請時重新裝入

我有一個組件，Split，需要兩個孩子。第一個孩子將顯示在右側第二個孩子的屏幕&的左側。如果屏幕寬度低於某個點，則只顯示右側，左側將從DOM中刪除。反應：防止父母重新申請時重新裝入

示例兒童可能是Sidebar組件和Content組件。對於移動設備，我不想顯示菜單，但有一個特殊的移動菜單，我彈出。

我的問題是：我如何刪除Sidebar組件而不卸載&組件也重新安裝Content組件？

我的Content組件獲取componentDidMount上的數據，我不希望它再次重新讀取或重新掛載（從而丟棄用戶輸入）。

基本上我有這樣的事情：

<Split> 
    <Sidebar/> 
    <Content/> 
</Split>

而且Split的渲染方法看起來是這樣的：

let children; 
let firstChild = this.props.children[0]; 
let lastChild = this.props.children.pop(); 
if (this.state.responsive === 'singleColumn') { 
    children = (
    <div> 
     <div style={{display: 'none'}}>{firstChild}</div> 
     {lastChild} 
    </div> 
); 
} else { 
    children = (
    <div> 
     {firstChild} 
     {lastChild} 
    </div> 
); 
} 

return (
    <div> 
    {children} 
    </div> 
);

即使{lastChild}總是呈現，不管是什麼，它每次拆分必須重新渲染時仍然會卸載並重新加載！

即使有渲染，看起來像這樣：

return (
    <div> 
    {this.props.children.pop()} 
    </div> 
);

使最後一個孩子（這永遠不會改變）將要卸載&渲染之前重新安裝。

如果我不是修改Split並通過該組件，將永遠是在DOM中像這樣的屬性：

<Split staticComponent={<Content />}> 
    <Sidebar /> 
</Split>

它工作正常。那麼爲什麼它不工作，當我剛剛彈出像這樣的最後一個孩子{this.props.children.pop()}而不是這個{this.props.staticComponent}

有沒有一種理智的方法來解決這個問題？

來源

2016-03-23 Oscar Linde

我明白你的意思，因此刪除，你有沒有嘗試過在這裏使用CSS？這是更多的問題，沒有？在某個屏幕尺寸下，您需要更改爲要顯示的該子項的樣式：none ..hope可以幫助 – JordanHendrix

查看本文，大概半程下來，他們會根據屏幕大小執行類似的操作 https：// medium.com/@jviereck/modularise-css-the-react-way-1e817b317b04#.wew0pfsyh – JordanHendrix

嗯，事情是，斯普利特來自一個圖書館，它真的很好，完美的作品，沒有寫任何CSS，除了這個問題。所以純粹的CSS解決方案並不是我想要的。我希望React移動{lastChild}組件，而不是移除並將其插入DOM。 –

終於設法解決了這個問題！我重新寫Split的渲染是這個樣子：

let left; 
if (this.state.responsive !== 'singleColumn') { 
    left = this.props.children.slice(0, -1); 
} 

return (
    <div ref="split" className={classes.join(' ')}> 
    {left} 
    {this.props.children[this.props.children.length-1]} 
    </div> 
);

這樣，最後一個孩子總是獲取呈現。顯然pop()沒有工作，因爲然後我修改了觸發怪異行爲的原始數組的孩子。

來源

2016-03-23 20:07:20

這可以用生命週期的方法來完成：shouldComponentUpdate：

shouldComponentUpdate: function(nextProps, nextState) { 
    return this.props.value !== nextProps.value; 
}

如果邏輯內返回false，組件將不會更新。

退房文檔：https://facebook.github.io/react/docs/advanced-performance.html

來源

2016-03-23 18:59:15 JordanHendrix

拆分組件仍然應該重新渲染。但是最後一個通過的孩子不應該從DOM中刪除。所以我不認爲shouldComponentUpdate會幫助我不幸：（ –

這應該在你想要控制的組件中，而不是分割 – JordanHendrix

shouldComponentUpdate只會阻止組件渲染。我想阻止Split組件卸載我的子組件。 –

你可以在組件的生命週期中使用shouldComponentUpdate功能。如果返回false，則根據文檔

如果shouldComponentUpdate返回false，則render（）將被完全跳過，直到下一個狀態發生更改。另外，componentWillUpdate和componentDidUpdate不會被調用。

來源

2016-03-23 19:22:45 northsideknight

這隻會阻止渲染。我想要的是防止卸載並重新安裝我的組件，因爲它然後失去它的狀態並再次獲取數據componentDidMount –

因此，你只想影響組件？我的猜測應該是那應該是在組件本身內部處理，你可以通過的道具傳遞一個函數，當它從調用時，會隱藏自己（在渲染時），它會是隻有一個受到影響，因此不會影響 – northsideknight

是的，我意識到我可以像這樣解決它。但是我使用了一個名爲Grommet的庫，它有這個Split組件，當窗口變得太小時隱藏第一個孩子。然而，第二個孩子仍然受到重新安裝的影響:(我需要React瞭解沒有任何事情已經完成，因此它不應該被重新安裝。 –

反應：防止父母重新申請時重新裝入

回答

相關問題