Package Exports

koxr

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (koxr) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

koxr

react状态管理库

API

observable

参数为非数组, 普通observable变量;

const observableValue = observable(0);

定义一个初始值为0的observable变量

observableValue(1);

observableValue set操作, 异步更新该变量的观察者, 前后两次set同一个值不会更新

observableValue();

observableValue get操作

参数为数组, 在普通observable变量上扩展['pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift']等方法;

const observableArray = observable([]);
observableArray.push(0);
observableArray.push(1);
observableArray(); //[0, 1]

autorun

const destory = autorun(() => {
    console.log(observableValue())
});

observableValue 进行set操作, 都会触发log方法, 执行destory方法终止观察,一般处理副作用

computed

const computedValue = computed(() => {
    return observableValue() + 1;
})

observableValue 进行set, 会重新计算computedValue的值并缓存, computedValue get操作不会重新计算, 一般用作计算响应值

when

const destory = when(() => {
    //
}, () => {
    console.log(observableValue());
})

observableValue set操作, 会计算参数一的值为true时，执行参数二方法; destory执行终止观察

observer

class App extends Component {
    render() {
        return <div>{observableValue()}</div>;
    }
}
export default observer(App);

参数为class

observer(() => {
    return <div>{observableValue()}</div>;
});

参数为function

observableValue set操作自动更新组件