React Native 搭配 MobX 使用心得

MSchumi 發布于2019-08-21 17:37 / 2095人閱讀

摘要：通過可以讓識別列表長度變化自動更新列表，利用維護項數據可以使每個項保持響應式卻互不影響，對長列表優化效果很明顯。最好的方式是將數據統一放在中，子組件通過方式獲取數據。

MobX 是一款十分優秀的狀態管理庫，不但書寫簡潔還非常高效。當然這是我在使用之后才體會到的，當初試水上車的主要原因是響應式，考慮到可能會更符合 Vue 過來的思考方式。然而其實兩者除了響應式以外并沒有什么相似之處。

在使用過程中走了不少彎路，一部分是因為當時掃兩眼文檔就動手，對 MobX 機制理解得不夠；其它原因是 MobX 終究只是一個庫，會受限于 React 機制，以及與其它非 MobX 管理組件的兼容問題。當中很多情況在文檔已經給出了說明（這里和這里），我根據自己遇到的再做一番總結。

與非響應式組件兼容問題

與非響應式的組件一起工作時，MobX 有時需要為它們提供一份非響應式的數據副本，以免 observable 被其它組件修改。

observable.ref

使用 React Navigation 導航時，如果要交由 MobX 管理，則需要手動配置導航狀態棧，此時用 @observable.ref “淺觀察”可避免狀態被 React Navigation 修改時觸發 MobX 警告。

當 Navigator 接受 navigation props 時代表導航狀態為手動管理。

import { addNavigationHelpers, StackNavigator } from "react-navigation"
import { observable, action } from "mobx"
import { Provider, observer } from "mobx-react"
import AppComp from "./AppComp"

const AppNavigator = StackNavigator({
  App: { screen: AppComp },
  // ...
}, {
  initialRouteName: "App",
  headerMode: "none"
})

@observer
export default class AppNavigation extends Component {
  @observable.ref navigationState = {
    index: 0,
    routes: [
      { key: "App", routeName: "App" }
    ],
  }

  @action.bound dispatchNavigation = (action, stackNavState = true) => {
    const previousNavState = stackNavState ? this.navigationState : null
    this.navigationState = this.AppNavigator.router.getStateForAction(action, previousNavState)
    return this.navigationState
  }

  render () {
    return (
      
        
      
    )
  }
}

observable.shallowArray() 與 observable.shallowMap()

MobX 還提供其它方便的數據結構來存放非響應式數據。

比如使用 SectionList 的時候，我們要為其提供數據用于生成列表，由于 Native 官方的實現跟 MobX 不兼容，這個數據不能是響應式的，不然 MobX 會報一堆警告。

MobX 有個 mobx.toJS() 方法可以導出非響應式副本；如果結構不相同還可以使用 @computed 自動生成符合的數據。但這兩個方法每次添加項目都要全部遍歷一遍，可能會存在性能問題。

這時其實可以維護一個 observable.shallowArray，里面只放 key 數據，只用于生成列表（像骨架一樣）。傳給 SectionList 的 sections props 時 slice 數組復制副本（shallowArray 里的數據非響應式，所以只需淺復制，復雜度遠小于上面兩種方式）。

然后 store 維護一個 observable.map 來存放每個項的數據，在項（item）組件中 inject store 進去，再利用 key 從 map 中獲取數據來填充。

通過 shallowArray 可以讓 MobX 識別列表長度變化自動更新列表，利用 map 維護項數據可以使每個項保持響應式卻互不影響，對長列表優化效果很明顯。

// store comp
class MyStore {
  @observable sections = observable.shallowArray()
  @observable itemData = observable.map()

  @action.bound appendSection (section) {
    const data = []
    section.items.forEach(action(item => {
      this.itemData.set(item.id, item)
      data.push({key: item.id})
    }))
    this.sections.push({
      key: section.id,
      data
    })
  }
}

// MyList comp
import { SectionList } from "react-native"
@inject("myStore")
@observer
class MyList extends React.Component {
  _renderItem = ({item}) => 

  render () {
    return (
      
    )
  }
}

// SectionItem comp
@inject("myStore")
@observer
class SectionItem extends React.Component {
  render () {
    const {myStore, id} = this.props
    const itemData = myStore.itemData.get(id)
    return (
      {itemData.title}
    )
  }
}

computed

利用 @computed 緩存數據可以做一些優化。

比如有一個響應式的數組 arr，一個組件要根據 arr 是否為空更新。如果直接訪問 arr.length，那么只要數組長度發生變化，這個組件都要 render 一遍。

此時利用 computed 生成，組件只需要判斷 isArrEmpty 就可以減少不必要的更新：

@computed get isArrEmpty () {
  return this.arr.length <= 0
}

observable.map

因 JS 機制 MobX 不能檢測屬性的增刪，所以最好用 observable.map 取代簡單 {} 對象。另外 MobX 沒有提供 Set 支持，可以用 key 和 value 一樣的 Map 代替。

避免在父組件中訪問子組件的屬性

這條規則在文檔也提到，原因很簡單，MobX 對于一個 observer 組件，是通過訪問屬性來記錄依賴的。所以哪怕父組件里沒有用到這個屬性，只是為了作為 props 傳給子組件，MobX 還是算它依賴了這個屬性，于是會產生不必要的更新。最好的方式是將數據統一放在 store 中，子組件通過 inject store 方式獲取數據。

小組件

由于 React 的機制，MobX 只能在組件層面發光發熱，對于組件內部就無能為力了。所以大組件用 MobX 很容易卡死（用其它也會），小組件才能真正發揮 MobX 自動管理更新的優勢。

博客鏈接：https://blog.crimx.com/2017/1...

【完】

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89757.html

前端每周清單第 45 期: Safari 支持 Service Worker, Parcel 完整教

摘要：的另一個核心特性，蘋果表示也正在開發中，按開發進度可能幾個月后就能與我們見面。是基于的本地化數據庫，支持以及瀏覽器環境。前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID: frontshow），及時獲取前端每周清單。本期是 2017 年的最后一...

趙春朋 2019-08-21 18:24 評論0 收藏0
Mobx + React Native 獲取路由的狀態信息

摘要：年前公司由一個項目是使用來開發的所以遇到了一些問題比較影響開發進程的就是路由問題了實際上就是這個組件比較難懂這里給大家講解一下希望大家少踩點坑另外本篇文章使用的是環境主要講解的還是如何使用記錄中路由的狀態但是會穿插一些小內容這里雖然講到的是年前公司由一個項目是使用 ReactNative 來開發的所以遇到了一些問題,比較影響開發進程的就是路由問題了,實際上就是 ReactNaviga...

李濤 2019-08-22 14:54 評論0 收藏0
MobX學習之旅

摘要：一其實是一個比較輕便的可擴展的狀態管理工具，是一個由以及一些其他團隊的人共同維護的開源項目。當應用公共狀態的組件在狀態發生變化的時候，會自動完成與狀態相關的所有事情，例如自動更新自動緩存數據，自動通知等。一、MobX MobX其實是一個比較輕便的可擴展的狀態管理工具，是一個由Facebook以及一些其他團隊的人共同維護的開源項目。當應用公共狀態的組件在狀態發生變化的時候，會自動完...

劉福 2019-08-22 18:33 評論0 收藏0
我為什么從Redux遷移到了Mobx

摘要：需要注意的是，在中，需要把數據聲明為。同時還提供了運行時的類型安全檢查。在利用了，使異步操作可以在一個函數內完成并且可以被追蹤。例如在中，數組并不是一個，而是一個類的對象，這是為了能監聽到數據下標的賦值。 Redux是一個數據管理層，被廣泛用于管理復雜應用的數據。但是實際使用中，Redux的表現差強人意，可以說是不好用。而同時，社區也出現了一些數據管理的方案，Mobx就是其中之一。 R...

DevYK 2019-08-21 17:50 評論0 收藏0
Redux 的問題：React、MobX 和 Realm 能解決嗎？

摘要：它是由一個非常聰明的人開發的，用來緩解在單頁面應用中管理狀態的問題。的問題沒有一種適合所有場景的完美工具。為設計的是世界的另一個新增內容，但目前僅適用于。這將導致最后期限延長，并且留下更多需要我們維護的代碼。原文：The Problems with Redux: Can React, MobX, and Realm save us? 作者：Erich Reich 首先，我不討厭 ...

snifes 2019-08-21 16:41 評論0 收藏0