# grey-react-box

**Repository Path**: grey-ts/grey-react-box

## Basic Information

- **Project Name**: grey-react-box
- **Description**: 轻量级的 分模块方式的数据状态管理
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-05-31
- **Last Updated**: 2023-03-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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


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


* 初始化
```ts

// 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关联数据 （推荐）
```tsx
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>
    )
})
```

* 通过装饰器绑定数据
```tsx
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>
    )
})
```