van

vanex

Development library based on mobx.

Showing:

Popularity

Downloads/wk

24

Maintenance

No Maintenance Data Available

Package

Dependencies

10

Size (min+gzip)

82.9KB

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

vanex

NPM

github

Vanex 是基于 mobx 的 React 数据流管理框架,旨在借助 mobx 提供的基础能力,帮助用户组织更大规模的 React 项目。

文档

https://alibaba.github.io/vanex/

Quick Start

Vanex 提供两个简洁的 API:@vanex 和 start

import React from 'react';
import { vanex, start } from 'vanex';
import axios from 'axios';

const model = {
    name: 'my',

    // 数据部分
    data: {
        name: 'abc'
    },

    // 异步请求部分
    effects: {
        async getName(arg) {
            try {
                const res = await axios.get(`/user?ID=${arg}`);

                if(res.success && res.data) {
                    // set方法会自动触发UI渲染
                    this.set({
                        name: res.data.name
                    });
                }
            } catch(e) {
                alert(e.message);
            }
        }
    },
};

@vanex('my')
class Comp extends React.Component{
    constructor() {
        super(...arguments);
    }

    componentWillMount() {
        // 异步请求数据
        this.my.getName('test');
    }

    render() {
        const { name } = this.my.toJS();

        return (
            <div>
                {name}
            </div>
        );
    }
}

start({
    component: Comp,
    container: '#root', // 要渲染的父节点,不传start方法会返回一个React组件
    models: {
        my: model,
    }
});

See more: https://alibaba.github.io/vanex/quick-start.html

说明

  • mobx是基于Object.defineProperties()(无法监听新增属性)实现的,所以会导致:如果在model的data里没有预先设置某项值,后面对该值做改动的时候就不会触发UI的重新渲染,解决方案:调用React刷新UI的API,手动触发UI更新:this.foreceUpdate()
  • ES7 decorator语法的编译需要babel插件支持:babel-plugin-transform-decorators-legacy
  • mobx会对我们存储的数据做一层包装,以实现对get/set的订阅,所以我们在控制台打印某个数据的时候,会打印出被包装了的对象,这时,我们可以调用toJS()方法来获取原来未被包装的数据,比如我们想获取名为home的model的account对象: {name: 'home', data: {account: {id: 1}}},则可以执行:const { account } = this.home.toJS();或者const { account } = this.props.home.toJS(),会正常输出:{id: 1}

TODO

  • 修复autorun里执行effects里的方法会导致死循环的问题;

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial