grey-react-box v1.0.8

轻量级的 分模块方式的数据状态管理

github

https://gitee.com/grey-ts/grey-react-box

• 初始化

// box 的 状态
// 我们可以任意的添加我们需要的字段
export class UserInfoState {
    num = 0; // 这里是我们的一个例子
}


// box 对象
// 继承 GreyReactBox泛型为box状态对象
export default class UserInfo extends GreyReactBox<UserInfoState> {
    constructor() {
        super(new UserInfoState()); // 初始化box状态数据
    }

    // 通过 pipeline 方法来创建add方法，add执行完后，会触发关联了box状态的组件的渲染
    // boxStart 当前box的状态
    // option 调用add方法时的参数（必须为可选参数）
    add = this.pipeline(async(boxStart, option?:number) => {
        boxStart.num += option || 0;
    })
}

• 通过hook关联数据 （推荐）

import { useContext } from 'grey-react-box';
import UserInfo from './UserInfo';

// 模块跟初始化
export default () => {

    // 初始化 box 实例
    const controller = React.useMemo(() => new UserInfo(), []);

    return (
        // 设置 box 的跟节点
        <Source box={controller}>
            <Main />
        </Source>
    )
}

const Main = () => {
    
    // 通过 useContext 获取到根部box的实例
    const controller = useContext<UserInfo>();

    // 通过 box的 useState 方法关联box的 num 属性
    const num = controller.useMemo(e => e.num, []);

    // 点击按钮事件，点击后给box的num属性加1 
    const onClickUserInfo = React.useCallback(() => {
        controller.pipeline(async boxStart => {
            boxStart.num += 1;
        })()
    })
    
    return (
        <div>
             {/* 按钮调用 onClickUserInfo 方法，并显示 num */}
            <Button onClick={onClickUserInfo} >+1:{num}</Button>

            {/* 按钮调用 controller.add 方法，并显示 num */}
            <Button onClick={() => { controller.add(2) }} >+2:{num}</Button>
        </div>
    )
})

• 通过装饰器绑定数据

import { decorator, Source, ISourceChildProps } from 'grey-react-box';
import UserInfo from './UserInfo';

// 模块跟初始化
export default () => {

    // 初始化 box 实例
    const controller = React.useMemo(() => new UserInfo(), []);

    return (
        // 设置 box 的跟节点
        <Source box={controller}>
            <Main />
        </Source>
    )
}

const Main = decorator<any, ISourceChildProps<UserInfo>>(
    Source.connect() // 把根部的box实例注入到props里
)(props => {
    
    // 获取到box实例
    const { controller } = props;

    // 通过 box的 useState 方法关联box的 num 属性
    const num = controller.useMemo(e => e.num, []);

    // 点击按钮事件，点击后给box的num属性加1 
    const onClickUserInfo = React.useCallback(() => {
        controller.pipeline(async boxStart => {
            boxStart.num += 1;
        })()
    })
    
    return (
        <div>
            {/* 按钮调用 onClickUserInfo 方法，并显示 num */}
            <Button onClick={onClickUserInfo} >+1:{num}</Button>

            {/* 按钮调用 controller.add 方法，并显示 num */}
            <Button onClick={() => { controller.add(2) }} >+2:{num}</Button>
        </div>
    )
})