如何在不改變父級狀態的情況下在兩個兄弟組件之間進行通信？

我是ReactJS的新手，我遇到了以下問題 - 我有Parent組件，以及兩個子組件 - List和Map。這兩個都有兒童項目。我想要的是當我在Map中懸停組件時 - 在List中更改適當組件的樣式，反之亦然。我可以處理懸停事件，但如果我在Parent狀態下保存了懸停元素的ID，則它會在每次懸停時重新提交全部Parent組件。我怎樣才能避免這種情況？我沒有使用Redux或類似的東西。如何在不改變父級狀態的情況下在兩個兄弟組件之間進行通信？

來源

2016-09-07 Alexey

您確定更新父組件的狀態是個大問題嗎？如果它包含許多其他孩子，則可以考慮製作一個只包含「List」和「Map」的中間組件，並更新該組件的狀態。 –

@TomFenech，我不確定。我有一個列表可以包含多達1000個元素，並且在每個「Parent」呈現之前進行過濾和排序，所以我認爲它不是一個好主意，可以在每個元素上重新渲染 – Alexey

不，它不會。

它只會重新渲染已更改的元素。
只要做到這一點，不用擔心 - O(n)是極其快。正如評論中指出的那樣，如果你的組件非常大 - 你也可以實現一箇中間組件。

這裏是React implements the diff algorithm.

重新呈現如何在的情況下：

不同的節點類型
鍵屬性改變

來源

2016-09-07 15:10:12 lustoykov

感謝您的回答。我會嘗試在最大元素數量上進行測試，但不要僅僅渲染，而是排序和過濾，如果我的權利爲 – Alexey

，它將會是'O（n^2'），所以如果你的複雜度是二次方的，你不應該擔心線性計算。 – lustoykov

經由狀態兄弟組件之間實現通信的方式是的共同父母。

如果更新父項的狀態，則會重新渲染。如果這是昂貴的操作，則一個解決辦法是將狀態存儲在一箇中間組件：

<Parent> 
    <Intermediate> 
    <Map /> 
    <List /> 
    </Intermediate> 
</Parent>

現在繁重可以在Parent組件完成的，其結果可以作爲道具被傳遞給Intermediate一。當Intermediate的狀態更新時，Parent不必做任何工作。

來源

2016-09-07 15:42:31

如何在不改變父級狀態的情況下在兩個兄弟組件之間進行通信？

回答

相關問題