简单使用

@vanex 是 Vanex 提供的一种方便将 model 注入组件的 API。

import { vanex } from 'vanex';
@vanex('modelOne', 'modelTwo')
class Comp exntends React.Component {
    render() {
        const { name } = this.modelOne;
        const { progress } = this.modelTwo;
        return <div>{name}-{progress}</div>
    }
}

AutoRun

除了 Model 中有 autorun 字段外，我们还支持将 Component 的方法注册为 autorun，这样在 Model 发生改变时不仅仅是相应的组件 render 函数被重新执行，注册的 autorun 函数也会执行。

import { vanex } from 'vanex';
// 注册 `syncState` `anotherSync` 为 autorun 方法
@vanex('modelOne', 'modelTwo', ...)('syncState', 'anotherSync', ...)
class Comp exntends React.Component {
    render() {
        const { name } = this.modelOne;
        const { progress } = this.modelTwo;
        return <div>{name}-{progress}</div>
    }

    syncState() {
        if (this.modelOne.someStatus) {
            this.setState({
                ...
            });
        }
    }

    anotherSync() {
    }
}

由于组件的 autorun 方法只在组件存在时有意义，所以我们注入了组件的声明周期，会在 componentWillMount 时注册 autorun 方法，并在 componentWillUnmount 取消注册。

整个流程为：

注册 autorun => componentWillMount => componentWillUnmount => 取消注册 autorun。

这个特性在大多数情况下没有用处，但是在结合本地 state 和 Model 时非常有用，尤其是使用 Form 组件时：使用表单。

纯函数组件

针对纯函数组件的使用方法见：纯函数组件