很多時候，為了減少render的次數，我們不得不使用shouldUpdate或memo等方法，但是當組件使用了context背景關系之后，無論你的反回值是true或false,只要context里的值發生了改變，都無法阻止組件的render，這也是因為組件需要監聽context值的變化，但有時，我們并不需要所有變化都被更新，所以嘗試了幾種方案進行優化：
- 更新時不使用擴展符{...}，context就不會生成新的物件，但明顯不合理，
- 把值存在頂層的state中，不存context中，這樣又有點繞，得不償失
- 使用EventEmitter這種發布式模式，不在本次討論范圍內，包括使用redux的方案
- 使用不同顆粒度的context
- 既然使用了useContext的組件一定會被render，只要把useContext進行上移即可，移到父組件上去呼叫，相當于一種折中的方式，把大量子組件的更新context的方法移交到父組件中去，這樣就可以變相的優化了，
在以上幾點中，我最后選擇了使用第五點，也就是把context的使用提升到了父級，這就有點類似于redux中的connect組件了，在這里可以把context轉化成props傳入子組件，然后在子組件中判斷props的變化，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/285929.html
標籤：JavaScript
上一篇：在微信框架模塊中，基于Vue&Element前端的微信公眾號和企業微信的用戶系結
下一篇：JS之-BOM模型-DOM模型