我是ReactJS的新手,我遇到了以下問題 - 我有Parent
組件,以及兩個子組件 - List
和Map
。這兩個都有兒童項目。我想要的是當我在Map
中懸停組件時 - 在List
中更改適當組件的樣式,反之亦然。 我可以處理懸停事件,但如果我在Parent
狀態下保存了懸停元素的ID,則它會在每次懸停時重新提交全部Parent
組件。我怎樣才能避免這種情況? 我沒有使用Redux或類似的東西。如何在不改變父級狀態的情況下在兩個兄弟組件之間進行通信?
0
A
回答
0
不,它不會。
它只會重新渲染已更改的元素。
只要做到這一點,不用擔心 - O(n)
是極其快。 正如評論中指出的那樣,如果你的組件非常大 - 你也可以實現一箇中間組件。
這裏是React implements the diff algorithm.
重新呈現如何在的情況下:
- 不同的節點類型
- 鍵屬性改變
0
經由狀態兄弟組件之間實現通信的方式是的共同父母。
如果更新父項的狀態,則會重新渲染。如果這是昂貴的操作,則一個解決辦法是將狀態存儲在一箇中間組件:
<Parent>
<Intermediate>
<Map />
<List />
</Intermediate>
</Parent>
現在繁重可以在Parent
組件完成的,其結果可以作爲道具被傳遞給Intermediate
一。當Intermediate
的狀態更新時,Parent
不必做任何工作。
相關問題
- 1. Reactjs - 通過更改父級狀態來傳遞兄弟之間的信息
- 2. React.js - 在兄弟組件之間進行通信
- 3. 兄弟組件之間的通信Angular2
- 4. 如何在角度上的兄弟指令/組件之間進行通信1.5
- 5. 在我的情況下如何在兩個控制器之間進行通信?
- 6. 在這種情況下如何更改下三個兄弟姐妹的班級?
- 7. 通過在服務中持有組件參考在angular4兄弟組件之間進行通信
- 8. 如何修改父組件,而不用改變父項的兄弟Angular 2
- 9. 管理React/Redux中兄弟組件之間的滾動狀態
- 10. 兄弟姐妹組件之間的通信
- 11. 如何在兩個數組列表之間進行通信
- 12. 如何在不改變變量的情況下進行遞歸
- 13. 如何在第一個下一個兄弟之後獲得下一個兄弟?
- 14. 如何在python中的兩個進程之間進行通信
- 15. 如何在兩個C++ MFC插件之間進行通信?
- 16. Angular UI-Router:如何在沒有父級的情況下調用子級狀態?
- 17. Angular4中兩個兄弟組件之間的共享服務
- 18. angular2-如何在兩個獨立的組件之間進行通信?
- 19. React將狀態傳遞給兄弟組件,直至父類
- 20. Angular 2兄弟組件通信
- 21. 如何在Air中的兩個NativeWindows之間進行通信
- 22. 如何在兩個單獨的類之間進行通信?
- 23. 如何在GWT中的兩個模塊之間進行通信
- 24. userscript的兩個實例如何在幀之間進行通信?
- 25. Xpath兄弟情況(或)
- 26. 如何在沒有HyperlinkButton的情況下在兩頁之間進行導航?
- 27. C# - 在沒有雙向引用的情況下在兩個項目之間進行通信
- 28. 在頂級兄弟擁有固定位置的情況下,爲兄弟分區添加邊距頂部
- 29. 兄弟姐妹控制器可以在沒有父母幫助的情況下相互通信 - AngularJS
- 30. 在不卸載的情況下更改原始視頻組件的父級
您確定更新父組件的狀態是個大問題嗎?如果它包含許多其他孩子,則可以考慮製作一個只包含「List」和「Map」的中間組件,並更新該組件的狀態。 –
@TomFenech,我不確定。我有一個列表可以包含多達1000個元素,並且在每個「Parent」呈現之前進行過濾和排序,所以我認爲它不是一個好主意,可以在每個元素上重新渲染 – Alexey