AliceCooper214 / zustand-learning

zustand-learning

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

zustand的学习

以下链接

基本功能的实现

  • createStore
传入函数一个函数(set, get, api) => Store
内部定义函数setStore, getStore, api
store = initialState(setStore, getStore, api)
  • useStore
通过use-sync-external-store插件去定义useStore
  • use-sync-external-store的原理
useSyncExternalStoreWithSelector的原理是基于React的useMemo和useEffect hooks。它接收两个参数:selector和syncFunction。

selector是一个函数,它接收store的状态并返回必须同步的部分。syncFunction是一个函数,它接收必须同步的部分并返回任何需要更新存储的东西。

该hook首先使用useMemo将selector应用于存储的状态以获取必须同步的部分。然后使用useEffect,在必须同步的部分发生变化时调用syncFunction。syncFunction可能会更改存储的状态,例如调用某个API或将数据写入本地存储。

在此过程中,使用React的上下文和钩子来确保存储的状态被正确维护和同步。
  • middleware的使用

很简单, 类似高阶函数的使用

About

zustand-learning


Languages

Language:JavaScript 66.3%Language:CSS 28.1%Language:HTML 5.6%