CyanX

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

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

个性

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

兼容环境

古代浏览器和 IE11

[外链图片转存失败,源站可能有防盗链机制,倡议将图片保留下来间接上传(img-fMegCeoy-1596096717160)(README_files/1.png)]

装置

• 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) 2013-present, Bholder CY