轉(zhuǎn)載自：https://blog.csdn.net/wo_shi_ma_nong/article/details/100713151?。

react-service是一個(gè)非常簡(jiǎn)單的用來(lái)在react、react native中進(jìn)行狀態(tài)維護(hù)的包。

其用法非常簡(jiǎn)單，只有有限的幾個(gè)屬性和方法，非常好用。

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

用法如下：

首先，在自己的react或react native項(xiàng)目中安裝包：

npm install r-service -save

注意：?安裝的包名是r-service，而不是react-service。實(shí)際上react-service是另一個(gè)不同的包。

在react-service的概念里，Service是數(shù)據(jù)與UI之間的橋梁。Service用來(lái)處理數(shù)據(jù)，并維護(hù)狀態(tài)，UI只負(fù)責(zé)數(shù)據(jù)的展示。可為每一類數(shù)據(jù)創(chuàng)建一個(gè)Service。

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

以下為官方文檔上的一個(gè)小示例：

./service/User.js

import Service from 'r-service';class User extends Service{ // 每個(gè)Service繼承自react-service中的Service gets(){if(!this.$data.users){ // 數(shù)據(jù)存儲(chǔ)在 $data 中// HTTP調(diào)用服務(wù)端提供的接口獲取數(shù)據(jù)var users = [{id: 10, name: 'CYF'},{id: 20, name: '張三豐'},{id: 30, name: '袁崇煥'}];// 將數(shù)據(jù)使用 $set 方法存儲(chǔ)到 $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);// 數(shù)據(jù)發(fā)生改變后，并不會(huì)立即應(yīng)用到UI中，需調(diào)用 $apply 方法使之體現(xiàn)到UI中this.$apply();}// // 第二種方式// var users = this.$data.users.filter((T) => {// return T.id != id;// });// // 使用 $set 方法重新設(shè)置數(shù)據(jù)，將立即體現(xiàn)在UI中，而不用調(diào)用 $apply 方法// this.$set('users', users); } }

每個(gè)Service需繼承自react-service，其從父類中繼承了一些方法和屬性。所有數(shù)據(jù)存儲(chǔ)在$data中。

當(dāng)$data中的數(shù)據(jù)發(fā)生改變后，需調(diào)用$apply()方法使更改體現(xiàn)到UI中。但如果使用$set(key, value)方法設(shè)置數(shù)據(jù)，則不用調(diào)用$apply()。

在UI中，綁定Service的$data中的數(shù)據(jù)。

./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，將當(dāng)前組件作為參數(shù)傳入，// 這樣，當(dāng)前組件的狀態(tài)就能在Service中維護(hù)了this.user = User.init(this);// 調(diào)用Service中的方法獲取數(shù)據(jù)this.user.gets();}remove(id){// 調(diào)用Service中的remove方法this.user.remove(id);}render(){// UI中的數(shù)據(jù)從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> } }

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

我再稍候補(bǔ)充一下，在另一個(gè)頁(yè)面中展示同樣的用戶列表：

./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> } }

其實(shí)，第二個(gè)頁(yè)面中使用的Service與第一個(gè)頁(yè)面中的是同一個(gè)，因此，在第二個(gè)頁(yè)面雖然沒有調(diào)用gets()方法，但仍然能夠綁定到數(shù)據(jù)。并且，在第一個(gè)頁(yè)面中對(duì)數(shù)據(jù)的更改，也會(huì)同時(shí)反應(yīng)到第二個(gè)頁(yè)面中。

?

轉(zhuǎn)載于:https://www.cnblogs.com/mafengzi/p/11503631.html

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的用react-service做状态管理，适用于react、react native的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。