https://github.com/small-tou/s-mobx
轻量级mobx实现，仅供参考
https://github.com/small-tou/s-mobx
javascript mobx react
Last synced: about 1 year ago
JSON representation
轻量级mobx实现，仅供参考
- Host: GitHub
- URL: https://github.com/small-tou/s-mobx
- Owner: small-tou
- Created: 2017-04-25T03:01:55.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-25T06:13:16.000Z (about 9 years ago)
- Last Synced: 2025-04-04T21:12:08.242Z (about 1 year ago)
- Topics: javascript, mobx, react
- Language: JavaScript
- Homepage:
- Size: 3.21 MB
- Stars: 124
- Watchers: 6
- Forks: 24
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## 原理解析
[如何自己实现一个mobx](./doc/readme.md)
## 使用
`npm install s-mobx --save`
## 优势
1. 兼容常用的mobx语法
2. 打包后 6K，GZip后 2.3K(mobx+mobx-react:71K,GZip 20.9K)
目前兼容的mobx用法：
* @observable
* @observer
* @computed
* extendObservable
* createObservable
* autorun
## 前提
babel需要配置以下插件才可使用。（.babelrc，react-native项目默认包含此配置）
```javascript
"plugins": [
"transform-decorators-legacy",
"transform-class-properties"
]
```
项目需依赖(package.json)：
```javascript
"babel-plugin-transform-decorators-legacy": "*",
"babel-plugin-transform-class-properties": "*", // rn 不需要
"babel-preset-es2015": "*" // rn 不需要
```
## 标注 observable 以及 autorun 的用法
```javascript
import {
observable,
autorun,
computed
} from 's-mobx';
class Person {
@observable
name = {
key:{
key:1
}
};
@computed get age() {
return this.name.key.key;
}
}
const person = new Person();
autorun(function(){
console.log(person.age);
})
person.name.key.key = 3;
person.name.key.key = 4;
```
## 给React组件设置 observer
```javascript
import {
observer,
} from 's-mobx';
import React, {Component} from 'react';
import SettingStore from './../../stores/setting';
@observer
class Index extends Component {
constructor() {
this.store = new SettingStore();
}
render() {
return (
);
}
}
export default Index;
```