MobX 是一款十分優秀的狀態管理庫，不但書寫簡潔還非常高效。愛掏網 - it200.com當然這是我在使用之后才體會到的，當初試水上車的主要原因是響應式，考慮到可能會更符合 Vue 過來的思考方式。愛掏網 - it200.com然而其實兩者除了響應式以外并沒有什么相似之處。愛掏網 - it200.com
在使用過程中走了不少彎路，一部分是因為當時掃兩眼文檔就動手，對 MobX 機制理解得不夠；其它原因是 MobX 終究只是一個庫，會受限于 React 機制，以及與其它非 MobX 管理組件的兼容問題。愛掏網 - it200.com當中很多情況在文檔已經給出了說明（這里和這里），我根據自己遇到的再做一番總結。愛掏網 - it200.com
與非響應式組件兼容問題
與非響應式的組件一起工作時，MobX 有時需要為它們提供一份非響應式的數據副本，以免 observable 被其它組件修改。愛掏網 - it200.com
observable.ref
使用 React Navigation 導航時，如果要交由 MobX 管理，則需要手動配置導航狀態棧，此時用?@observable.ref?“淺觀察”可避免狀態被 React Navigation 修改時觸發 MobX 警告。愛掏網 - it200.com
當 Navigator 接受?navigation?props 時代表導航狀態為手動管理。愛掏網 - it200.com
observable.shallowArray()?與?observable.shallowMap()
MobX 還提供其它方便的數據結構來存放非響應式數據。愛掏網 - it200.com
比如使用?SectionList?的時候，我們要為其提供數據用于生成列表，由于 Native 官方的實現跟 MobX 不兼容，這個數據不能是響應式的，不然 MobX 會報一堆警告。愛掏網 - it200.com
MobX 有個?mobx.toJS()?方法可以導出非響應式副本；如果結構不相同還可以使用?@computed?自動生成符合的數據。愛掏網 - it200.com但這兩個方法每次添加項目都要全部遍歷一遍，可能會存在性能問題。愛掏網 - it200.com
這時其實可以維護一個?observable.shallowArray，里面只放?key?數據，只用于生成列表（像骨架一樣）。愛掏網 - it200.com傳給?SectionList?的?sections?props 時?slice?數組復制副本（shallowArray 里的數據非響應式，所以只需淺復制，復雜度遠小于上面兩種方式）。愛掏網 - it200.com
然后 store 維護一個?observable.map?來存放每個項的數據，在項（item）組件中?inject?store 進去，再利用?key?從 map 中獲取數據來填充。愛掏網 - it200.com
通過 shallowArray 可以讓 MobX 識別列表長度變化自動更新列表，利用 map 維護項數據可以使每個項保持響應式卻互不影響，對長列表優化效果很明顯。愛掏網 - it200.com
?
computed
利用?@computed?緩存數據可以做一些優化。愛掏網 - it200.com
比如有一個響應式的數組?arr，一個組件要根據?arr?是否為空更新。愛掏網 - it200.com如果直接訪問?arr.length，那么只要數組長度發生變化，這個組件都要 render 一遍。愛掏網 - it200.com
此時利用 computed 生成，組件只需要判斷?isArrEmpty?就可以減少不必要的更新：
@computed?get?isArrEmpty?()?{??return?this.arr.length?
observable.map
因 JS 機制 MobX 不能檢測屬性的增刪，所以最好用?observable.map?取代簡單?{}?對象。愛掏網 - it200.com另外 MobX 沒有提供 Set 支持，可以用 key 和 value 一樣的 Map 代替。愛掏網 - it200.com
避免在父組件中訪問子組件的屬性
這條規則在文檔也提到，原因很簡單，MobX 對于一個?observer?組件，是通過訪問屬性來記錄依賴的。愛掏網 - it200.com所以哪怕父組件里沒有用到這個屬性，只是為了作為 props 傳給子組件，MobX 還是算它依賴了這個屬性，于是會產生不必要的更新。愛掏網 - it200.com最好的方式是將數據統一放在 store 中，子組件通過?inject?store 方式獲取數據。愛掏網 - it200.com
小組件
由于 React 的機制，MobX 只能在組件層面發光發熱，對于組件內部就無能為力了。愛掏網 - it200.com所以大組件用 MobX 很容易卡死，小組件才能真正發揮 MobX 自動管理更新的優勢。愛掏網 - it200.com
本文摘自異步社區，作者xiangzhihong，作品《MobX在React Native 中的使用心得》,未經授權，禁止轉載。愛掏網 - it200.com
推薦閱讀
2024年5月新書書單（文末福利）
2024年4月新書書單
異步圖書最全Python書單
一份程序員必備的算法書單
第一本Python神經網絡編程圖書
每天與你分享IT好文。愛掏網 - it200.com
在“異步圖書”后臺回復“關注”，即可免費獲得2000門在線視頻課程；推薦朋友關注根據提示獲取贈書鏈接，免費得異步e讀版圖書一本。愛掏網 - it200.com趕緊來參加哦！
點擊閱讀原文，查看更多內容
閱讀原文