react-native-easy-app 詳解與使用之（一） AsyncStorage

react-native-easy-app 是一款爲React Native App快速開發提供基礎服務的純JS庫(支持 IOS & Android)，特別是在從0到1的項目搭建初期，至少能夠爲開發者減小30%的工做量。

react-native-easy-app 主要作了這些工做：
1. 對AsyncStorage進行封裝，開發者只需幾行代碼便可實現一個持久化數據管理器。
2. 對fetch進行封裝，使得開發者只需關注當前App的先後臺交互邏輯和協議，定義好參數設置及解析邏輯便可。
3. 從新封裝了RN的View、Text、Image、FlatList 使用得這些控件在適當的時候支持事件或支持icon與文本，能有效減小布局中的嵌套邏輯。
4. 經過設置一個屏幕參考尺寸，重置XView、XText、XImage的尺寸，實現自動多屏適配

可能有人以爲，RN的AsyncStorage自己就很簡單，本身封裝也就幾十行代碼的工做量，爲何還要使用第三方庫？

一千我的心中，有一千個哈姆雷特，也許個人封裝思路能給你帶來不同的啓發也未可知呢？

數據存儲（AsyncStorage）

RN平臺提供的AsyncStorage有一些基礎方法：setItem，getItem，removeItem，getAllKeys，這些是promise模式的而且AsyncStorage只支持對純字符串的存取，所以咱們不便於直接在代碼中去直接調用這些方法，咱們得對AsyncStorage作一次封裝，怎樣封裝能使咱們更方便快捷的訪問本地存取呢？

咱們來看下經過 react-native-easy-app 庫的XStorage，咱們能夠怎樣訪問AsyncStorage：

一、核心代碼實現

import { XStorage } from 'react-native-easy-app';
import { AsyncStorage } from 'react-native';

let RNStorage = { // 自定義對象
    hasLogin: undefined,
    customerId: undefined,
    userInfo: undefined
};
XStorage.initStorage(RNStorage, AsyncStorage, () => { // 初始化自定義數據管理器
    RNStorage.customerId = '123456';
    RNStorage.hasLogin = true;
    RNStorage.userInfo = {name: 'zhangsan', age: 30};
    console.log(JSON.stringify(RNStorage)) // 打印數據管理器的內容
})

執行完上面的代碼後咱們看看控制檯輸出：

再經過Root Explorer 查看一下當前App的data/data/{package}/database 下數據表的內容：

什麼？上面的代碼中並無作任何數據庫的存儲操做啊，爲何賦值給RNStorage的數據卻被存到了本地數據庫中呢？咱們先看上面的代碼中作了什麼：

1. 定義了一個自定義對象RNStorage
2. 將自定義對象傳給XStorage.initStorage 進行初始化
3. 在初始化完成後對RNStorage的屬性進行了賦值
4. 打印RNStorage的內容

因而可知，數據的存儲操做一定是上面的第二、3步引發的。咱們進入XStorage的源碼看看，裏面作了什麼：

• 源代碼 1

  Object.keys(targetObj).map(key => {
  const keyStr = newKey(Tag, key);
  Object.defineProperty(targetObj, key, {
      get: () => {
          return this[keyStr]
      },
      set: (value) => {
          try {
              this[keyStr] = value;
              const valueStr = (typeof value === 'object') ? JSON.stringify(value) : String(value);
              keyValuesPairs.push([keyStr, valueStr])
          } catch (exception) {
              console.log(exception && exception.message);
          }
      },
  })
  });
  setInterval(() => {
  if (!isEmpty(keyValuesPairs)) {
      let saveDataArray = [...keyValuesPairs];
      keyValuesPairs = []; //清空原鍵值對數組
      AsyncStorage.multiSet(saveDataArray, () => {
          dataChangedCallback && dataChangedCallback(saveDataArray)
      });
  }
  }, 2500)

  • 源代碼 2

    const Keys = Object.keys(storageObj);
    const StorageKeys = Keys.map(key => newKey(Tag, key));
    // 初始化時，將AsyncStorage中的數據一次性讀取到內存中
    AsyncStorage.multiGet(StorageKeys).then(keyValuePairs => {
    keyValuePairs.map(([keyStr, value]) => {
    let [, key] = keyStr.split(splitTag);
    if (persistTag !== key && !isEmpty(value)) {
        storageObj[key] = convertData(value)
    }
    });
    setTimeout(() => initializedCallback(), 100)
    }).catch(error => {
    console.log(error)
    })

    哦，原來 XStorage 經過getter、setter生成器，將用戶自定義的 RNStorage 的各屬與 AsyncStorage 的數據表各字段的值進行了關聯造成了一個綁定關係，在當用戶對 RNStorage 的各屬性進行賦值、取值操做的時候，實際上會觸發getter、setter生成器，相應的會對 AsyncStorage 中的數據表進行讀寫操做。

效率與性能的平衡

• <讀> 在初始化XStorage的時候就將AsyncStorage中的全部字段一次性讀取到 RNStorage 對象中，之後續讀取屬性時，並不須要通過AsyncStorage，而是直接返回 RNStorage的屬性。
• <寫> 在開發者修改XStorage的屬性值時，會先將目標數據賦值給XStorage的屬性，而後再異步經過AsyncStorage將目標數據寫入到數據庫中（考慮到數據寫入的效率與性能問題，目前的處理方式爲：每次數值的變動都會記錄下來，定時程序每隔2.5秒進行一次數據批量寫入操做），但這個絲絕不會影響App對數據的操做，由於RNStorage中的數據是實時且同步的。

至此就徹底清楚了，是否是很簡單？開發者經過 react-native-easy-app 只需定義一個全局可導出的 RNStorage對象（命名隨意，並定義好App所需的各屬性字段），而後在App啓動的時候經過XStorage初始化一次RNStorage便可，之後直接訪問RNStorage中的屬性值就好了（全部對RNStorage屬性的修改都會被自動同步到AsyncStorage中），徹底是一勞永逸啊。。。

react-native-easy-app 詳解與使用之（二） fetch

想進一步瞭解，請移步至 npm 或github查看 react-native-easy-app，有源碼及使用示例，待你們一探究竟，歡迎朋友們 Star！