README
Overview
Mota 是一个面向 React 应用的状态管理库,希望用纯粹的、普通的 JavaScript 为应用编写不强依赖于框架的「业务模型」,然后,仅由 Mota 将「业务模型」关联到 React 应用。
此外,Mota 同时支持 Class 和 Hook 的两种编程风格。
Install
通过 npm 安装,如下
$ npm i mota --save
API
model
DemoModel.js
export class DemoModel {
count = 0;
add = ()=>{
this.count += 1;
}
}
Demol.js
import { model } from "mota";
import { DemoModel } from "./DemoModel"
@model(DemoModel)
export class Demo extends Component{
render() {
const {count, add} = this.model
return <div>
{count} <button onClick={add}>Add</button>
</div>
}
}
useModel
DemoModel.js
export const state = {
count: 0,
}
export function add(){
state.count += 1;
}
Demo.js
import { useModel } from "mota";
import { state, add } from "./DemoModel";
export function Demo{
const { count } = useModel(state);
return <div>
{count} <button onClick={add}>Add</button>
</div>
}
binding
For class
export class DemoModel {
message = "hello";
print = ()=> {
console.log(this.message);
}
}
@model(DemoModel)
@binding
export class Demo extends Component{
render() {
const { print } = this.model
return <div>
<input data-bind="message"/>
<button onClick={print}>Print</button>
</div>
}
}
For hook
export const state = {
message = "hello";
}
export function print(){
console.log(state.message);
}
export function Demo(){
const model = useModel(state);
return binding(<div>
<input data-bind="message"/>
<button onClick={print}>Print</button>
</div>, model);
}