转载自： 。
react-service是一个非常简单的用来在react、react native中进行状态维护的包。
其用法非常简单，只有有限的几个属性和方法，非常好用。
官方文档在这里： 。
用法如下：
首先，在自己的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()方法，但仍然能够绑定到数据。并且，在第一个页面中对数据的更改，也会同时反应到第二个页面中。
如对本文有疑问， 点击进行留言回复！！
JS 浅拷贝——Shallow copy 在 Canvas 绘图中的应用
网友评论