CyanX
CyanX是一款基于ReactHook的，针对函数式组件的极简、可扩展的状态管理器
极简，1分钟上手，两行代码
无限层级叠加，告别组件之间复杂的传值
极低的内存消耗，数据按需加载，组件所需的状态值变化时，才会重新渲染
基于ReactHook，仅支持React函数式组件开发
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nJfVhPqU-1597115354094)(README_files/1.png)]
npm
$ npm install cyanx
yarn
$ yarn add cyanx
存放的数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol
引用数据类型：对象(Object)、数组(Array)、函数(Function)
函数方法
观察指定的公用仓库&使用此公用仓库中状态的可观察组件，当公用仓库的某个状态值发生变化时，会重新渲染使用了此状态的可观察组件
withCyanxObserver(component, publicStoreName, publicStoreDefaultValues)是一个高阶组件HOC，有3个参数
参数名是否必填说明
component*必填需转化为观察者的组件
publicStoreName*必填需观察公用仓库的名称
publicStoreDefaultValues*必填公用仓库的默认值
将组件转为可观察状态，并得到所需的公用仓库的状态（存于props中），当使用的公用仓库的状态值改变时，将自动重新渲染，并得到最新的公用仓库的状态
withCyanxObservable(component, publicStoreName, stateKeyArray)是一个高阶组件HOC，有3个参数
参数名是否必填说明
component*必填需转化为可观察的组件
publicStoreName*必填需引入的公用仓库的名称
stateKeyArray选填组件需引用的公用仓库中状态的Key名称，引入的state会直接存入可观察组件的props中
dispatch是一个函数function，用于改变公用仓库的状态
特征
每一个公用仓库都会有唯一一个dispatch函数
dispatch会存在可观察组件的props中,函数名为${公用仓库的名称}Dispatch；或可观察组件的props中的名为${公用仓库的名称}的对象。此中有dispatch的元素
例子：有一个公用仓库publicStore，可观察组件C观察了公用仓库publicStore；可观察组件C获取公用仓库publicStore的dispatch可以通过一下两种方式拿到：
props.publicStoreDispatch
||
props.publicStore.dispatch
dispatch改变状态的规则，同React中的setState()函数
// 公用仓库的名称constPublicStoreName='publicStore';// 公用仓库的名称，自己定义// 公用仓库默认值constpublicStoreDefaultValues={a:1,b:{},c:()=>{},}
import{withCyanxObserver}from'cyanx';// 引入观察者HOC// 观察者组件constComponentObserver=()=>{...return(<><ComponentObservable/></>)}exportdefaultwithCyanxObserver(ComponentObserver,PublicStoreName,publicStoreDefaultValues);
import{withCyanxObservable}from'cyanx';// 引入可观察的HOC// 观察者组件constComponentObservable=({a,b,c,publicStoreDispatch,...props})=>{...}||constComponentObservable=(props)=>{const{a,b,c,dispatch}=props.publicStore;}exportdefaultwithCyanxObservable(ComponentObservable,PublicStoreName,['a','b','c']);
出于内存的考虑，建议观察者组件的下1级的子组件均转化成可观察组件
https://github.com/Bholder/CyanX
Copyright © 2020-present, Bholder CY
