https://github.com/rwson/bmx
简单的react状态管理库
https://github.com/rwson/bmx
decorator react state-management watcher
Last synced: 3 months ago
JSON representation
简单的react状态管理库
- Host: GitHub
- URL: https://github.com/rwson/bmx
- Owner: rwson
- Created: 2018-09-03T08:14:02.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-05T01:30:38.000Z (almost 8 years ago)
- Last Synced: 2025-03-11T03:41:57.965Z (over 1 year ago)
- Topics: decorator, react, state-management, watcher
- Language: JavaScript
- Homepage:
- Size: 152 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# bmx
---
### 基础使用:
- 状态定义
```javascript
// some-state.js
import { State } from 'path/to/bmx';
class SomeState extends State {
state = {
time: (new Date()).getTime()
}
update() {
this.setState({
time: (new Date()).getTime()
});
}
}
const someState = new SomeState;
export default someState;
```
- 使用该状态
```javascript
// app.jsx
import React, { Component } from 'react';
import { connect } from 'path/to/bmx';
import someState from 'path/to/some-state';
@connect(someState)
export default class App extends Component {
clicked() {
someState.update();
}
render() {
return (
{someState.state.time}
更新时间
);
}
}
```
### 高级用法
#### 用`watch`来控制组件重新渲染的前置条件
如果你不想在每次`state`发生改变就重新渲染, 而是某些状态发生改变再进行渲染, 可以用提供的`watch`装饰器进行连接来制定一些规则控制`render`执行时的前置条件
- 状态定义
```javascript
// some-state.js
import { State } from 'path/to/bmx';
class SomeState extends State {
state = {
time: (new Date()).getTime(),
time16: (new Date()).getTime().toString(16),
time32: (new Date()).getTime().toString(32)
}
}
const someState = new SomeState;
export default someState;
```
- 使用该状态
```javascript
// app.jsx
import React, { Component } from 'react';
import { connect, watch } from 'path/to/bmx';
import someState from 'path/to/some-state';
@connect(someState)
@watch(() => {
return [
someState.state.time16
];
})
export default class App extends Component {
render() {
return (
{someState.state.time}
{someState.state.time16}
{someState.state.time32}
);
}
}
```
这样改写完之后, 就只有在`someState.state.time16`发生改变之后才会进行`render`调用
#### TODO
- 实现`computed`计算属性