共计 1943 个字符,预计需要花费 5 分钟才能阅读完成。
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 个参数
参数名 | 是否必填 | 阐明 |
---|---|---|
component | * 必填 | 需转化为 <u> 观察者 </u> 的组件 |
publicStoreName | * 必填 | 需察看专用仓库的名称 |
publicStoreDefaultValues | * 必填 | 专用仓库的默认值 |
withCyanxObservable(<u> 可察看 </u> 的)
将组件转为 <u> 可察看 </u> 状态,并失去所需的专用仓库的状态(存于 props 中),当应用的专用仓库的状态值扭转时,将主动从新渲染,并失去最新的专用仓库的状态
withCyanxObservable(component, publicStoreName, stateKeyArray) 是一个高阶组件 HOC,有 3 个参数
参数名 | 是否必填 | 阐明 |
---|---|---|
component | * 必填 | 需转化为 <u> 可察看 </u> 的组件 |
publicStoreName | * 必填 | 需引入的专用仓库的名称 |
stateKeyArray | 选填 | 组件需援用的专用仓库中状态的 Key 名称,引入的 state 会间接存入 <u> 可察看组件 </u> 的 props 中 |
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
正文完