CyanX

CyanX 是一款基于 ReactHook 的，针对函数式组件的极简、可扩大的状态管理器

设计哲学——任何状态，无论在哪都应该简略疾速地取得

个性

• 极简，1 分钟上手，两行代码
• 有限层级叠加，辞别组件之间简单的传值
• 极低的内存耗费，数据按需加载，组件所需的状态值变动时，才会从新渲染
• 基于 ReactHook，仅反对 React 函数式组件开发

兼容环境

古代浏览器和 IE11

装置

• npm

$ npm install cyanx

• yarn

$ yarn add cyanx

外围概念

Public Store（专用仓库）

寄存多个组件均需应用的状态的仓库

寄存的数据类型

• __值类型 (根本类型)__：字符串（String）、数字 (Number)、布尔 (Boolean)、对空（Null）、未定义（Undefined）、Symbol
• __援用数据类型__：对象 (Object)、数组 (Array)、函数 (Function)
• 函数办法

withCyanxObserver（<u> 观察者 </u>）

察看指定的专用仓库 & 应用此专用仓库中状态的 <u> 可察看组件 </u>，当专用仓库的某个状态值发生变化时，会从新渲染应用了此状态的 <u> 可察看组件 </u>

withCyanxObserver(component, publicStoreName, publicStoreDefaultValues) 是一个高阶组件 HOC，有 3 个参数

withCyanxObservable（<u> 可察看 </u> 的）

将组件转为 <u> 可察看 </u> 状态，并失去所需的专用仓库的状态（存于 props 中），当应用的专用仓库的状态值扭转时，将主动从新渲染，并失去最新的专用仓库的状态

withCyanxObservable(component, publicStoreName, stateKeyArray) 是一个高阶组件 HOC，有 3 个参数

dispatch（调遣）

dispatch 是一个函数 function，用于扭转专用仓库的状态

特色

• 每一个专用仓库都会有惟一一个 dispatch 函数，函数名为 ${专用仓库的名称}Dispatch
• dispatch 会存在 <u> 可察看组件 </u> 的 props 中
• dispatch 扭转状态的规定，同 React 中的 setState() 函数

实例

常量

// 专用仓库的名称
const PublicStoreName =    '专用仓库的名称，本人定义';

// 专用仓库默认值
const publicStoreDefaultValues = {
    a: 1,
    b: {},
    c: ()=>{},
}

设置观察者组件 & 需察看的专用仓库

import {withCyanxObserver} from 'cyanx';// 引入观察者 HOC

// 观察者组件
const ComponentObserver = () => {
    ...
    
    return (
        <>
            <ComponentObservable />
        </>
    )
}

export default withCyanxObserver(ComponentObserver, PublicStoreName, publicStoreDefaultValues);

转化 <u> 可察看组件 </u>& 组件所需的专用仓库的状态

import {withCyanxObservable} from 'cyanx';// 引入可察看的 HOC

// 观察者组件
const ComponentObservable = ({a, b, c, 专用仓库的名称 Dispatch, ...props}) => {...}

export default withCyanxObservable(ComponentObservable, PublicStoreName, ['a', 'b', 'c']);

注意事项

出于内存的思考，倡议 <u> 观察者组件 </u> 的下 1 级的子组件均转化成 <u> 可察看组件 </u>

GitHub

https://github.com/Bholder/CyanX

License

MIT

Copyright (c) 2020-present, Bholder CY