TState

状态管理器 for React

特点

1. 全局/或局部状态监听
2. 不需要使用类似RecoilRoot的组件在最外层包裹，更适用于微前端的数据通信
3. TypeScript支持
4. 使用通用型数据总线进行高性能通信
5. 依赖小，打包大小gzip后约为0.7kb

Api

createStore()

可以理解为数据都挂载在store对象上

定义store下的一个子store

创建一个根数据仓库Store

const store = createStore();// 根store

const store = createStore();// 根store
const store1 = createStore(store, 'store1');// 在根store下创建一个子store

子store相当于在这个根store下存储一个atom 它的值是一个新的store

在多应用数据管理上，将所有数据存储在一个store下，容易引起管理混乱，难以维护

将store拆为多个store，每个store可以独立管理自己的数据

atom()

定义一个数据的原子状态

数据的定义来源 只能有一个

即不能有多个地方产生同一个key的数据

需要挂载到一个store上进行存储和管理

key 在该store内必须是唯一的

const nameAtom = atom({ store, key: 'name', default: 'coco' });

selector()

定义数据的派生状态 派生状态是数据的转换

需要挂载到你指定的store上进行管理

key 在store内必须是唯一的键名

useTState()

返回一个数组，第一个元素是 state 的值，第二个元素是一个 setter 函数，调用该函数时会更新为给定 state 的值。

使用此 hook 会使组件隐式地订阅给定的 state。

读取 atom 值的组件隐式订阅了该 atom ，因此任何 atom 的更新都将致使使用对应 atom 的组件重新渲染：

示例：

  const [name, setName] = useTState(nameAtom);

useTValue()

返回给定 T state 的值。

使用此 hook 会使组件隐式地订阅给定的 state。

示例：

  const name = useTValue(nameAtom);

useTSet()

返回一个 setter 函数，用来更新可写 Recoil state 的值。

设置数据的value 不读取值 即使数据发生变化也不会导致重新渲染

示例：

  const setName = useTSet(nameAtom);

getTValue()

直接获取数据的value

可以在任意地方直接获取到数据的值

setTValue()

直接设置value

可以在任意地方直接设置数据的值

cancelTState()

取消组件的订阅

试验性方法 未来可能会有变动

getTState()

获取组件的原始state

如果store下没有创建这个state 则返回undefined

useTRef()

获取store下的state的引用

引用是对state的代理，即：

1. 对ref的读取就会对ref对应的state进行读取
2. 对ref的写入就会对ref对应的state进行写入

取ref可以支持多层级，中间的key会作为store去读取

如果中间任意一个key的值发生变化都会导致重新渲染

如果没有拿到ref则返回空ref

这个时候如果对这个ref进行操作则不会有任何效果

当ref被准备好的时候，使用这个ref的组件会被重新渲染以获得正确的ref

getTRef()

获取store下的某一个state的引用 同步写法

如果没有拿到ref则返回空ref

isStore()

判断某个对象是否是TState支持的store

useTStore()

获取一个子store

const store = createStore();

const store2 = useTStore(store, 'storeName');
//在store下创建了一个atom，key为storeName，value为新的store 并返回这个store

示例

见 ./test/