用react-service做狀態管理，適用於react、react native

轉載自：https://blog.csdn.net/wo_shi_ma_nong/article/details/100713151 。

react-service是一個非常簡單的用來在react、react native中進行狀態維護的包。

其用法非常簡單，只有有限的幾個屬性和方法，非常好用。

官方文檔在這裡：https://github.com/caoyongfeng0214/react-service 。

用法如下：

首先，在自己的react或react native項目中安裝包：

npm install r-service -save

註意： 安裝的包名是r-service，而不是react-service。實際上react-service是另一個不同的包。

在react-service的概念里，Service是數據與UI之間的橋梁。Service用來處理數據，並維護狀態，UI只負責數據的展示。可為每一類數據創建一個Service。

可將所有的Service放在./service文件夾下。

以下為官方文檔上的一個小示例：

./service/User.js

import Service from 'r-service';

class User extends Service{ // 每個Service繼承自react-service中的Service
  gets(){
    if(!this.$data.users){ // 數據存儲在 $data 中
      // HTTP調用服務端提供的介面獲取數據
      var users = [
        {id: 10, name: 'CYF'},
        {id: 20, name: '張三豐'},
        {id: 30, name: '袁崇煥'}
      ];
      // 將數據使用 $set 方法存儲到 $data 中
      this.$set('users', users);
    }
  }
  
  remove(id){
    var idx = this.$data.users.findIndex((T) => {
      return T.id == id;
    });
    if(id >= 0){
      this.$data.users.splice(idx, 1);
      // 數據發生改變後，並不會立即應用到UI中，需調用 $apply 方法使之體現到UI中
      this.$apply();
    }
    
    // // 第二種方式
    // var users = this.$data.users.filter((T) => {
    //   return T.id != id;
    // });
    // // 使用 $set 方法重新設置數據，將立即體現在UI中，而不用調用 $apply 方法
    // this.$set('users', users);
  }
}

每個Service需繼承自react-service，其從父類中繼承了一些方法和屬性。所有數據存儲在$data中。

當$data中的數據發生改變後，需調用$apply()方法使更改體現到UI中。但如果使用$set(key, value)方法設置數據，則不用調用$apply()。

在UI中，綁定Service的$data中的數據。

./App.js

import React from 'react';
import {View, Text, Button} from 'react-native';

import User from './service/User';

class App extends React.Component {
  constructor(props){
    super(props);
    
    // 初始化Service，將當前組件作為參數傳入，
    // 這樣，當前組件的狀態就能在Service中維護了
    this.user = User.init(this);
    
    // 調用Service中的方法獲取數據
    this.user.gets();
  }
  
  remove(id){
    // 調用Service中的remove方法
    this.user.remove(id);
  }
  
  render(){
    // UI中的數據從Service的$data獲取
    return <View>
      {
        this.user.$data.users
        ?
        this.user.$data.users.map((T) => {
          return <View>
            <Text>{T.id} : {T.name}</Text>
            <Button title="Remove" onPress={()=>this.remove(T.id)}/>
          </View>
        })
        :
        null
      }
    </View>
  }
}

以上是官方文檔上的示例。

我再稍候補充一下，在另一個頁面中展示同樣的用戶列表：

./pages/Users.js

import React from 'react';
import {View, Text} from 'react-native';

import User from './service/User';

class Users extends React.Component {
  constructor(props){
    super(props);
    
    this.user = User.init(this);
  }
  
  render(){
    return <View>
      {
        this.user.$data.users
        ?
        this.user.$data.users.map((T) => {
          return <View>
            <Text>{T.id} : {T.name}</Text>
          </View>
        })
        :
        null
      }
    </View>
  }
}

其實，第二個頁面中使用的Service與第一個頁面中的是同一個，因此，在第二個頁面雖然沒有調用gets()方法，但仍然能夠綁定到數據。並且，在第一個頁面中對數據的更改，也會同時反應到第二個頁面中。