30行代码,实现超火状态管理工具 Zustand(43k star)

开发
什么是按需重渲染?就比如当 count 变化时,只有需要使用到 count 的组件才会重新渲染,没用到 count 的就不用重渲染,减少不必要的渲染

zustand

zustand 是一个 React 的轻量级状态管理工具库,用起来非常方便,不仅支持多模块创建状态管理,还可以使用 hook + selector 的方式,在组件内去获取所需的状态变量,我个人是感觉跟 Vue Pinia 有点相似,以下是一个简单的小例子,展示 zustand 的基本使用~

点击按钮的时候,会通过 increase方法去修改状态管理内部的 count。

按需重渲染

什么是按需重渲染?就比如当 count 变化时,只有需要使用到 count 的组件才会重新渲染,没用到 count 的就不用重渲染,减少不必要的渲染~

就比如我按了按钮之后,只有 Counter 这个组件会重渲染,而 App 却不会:

因为 count 只被 Counter 组件所选择到了,所以当count变化时,Counter 会重渲染:

源码实现

实现 create:

我们可以借着上面的代码例子,来一步步实现 zustand 的源码,先把引入的代码给注释掉,接下来我们自己来实现 create。

其实 zustand的源码量非常至少,并且也很容易读懂,无非就分成几步:

(1) 声明一个 create 函数,用来创建状态管理

(2) 维护一个状态管理 state,用来存放状态变量

(3) 声明两个函数 set、get,一个是设置

(4) 维护一个订阅集合 subscribe,收集订阅方,且当 set的时候,通知 subscribe 中的所有订阅方

(5) 准备一个 hooks 返回给使用者,并且需要准备一些材料,包括set、get、订阅入口

以上就实现了 create这个函数~

实现 _useStore

接下来实现 _useStore,其实他就做一件事:对比一下被选择的值,对比他修改前后是否相等,不相等的话就强制重渲染本组件。

强制重渲染可以巧妙借助useReducer这个内置 hooks 来实现::

达到效果

现在已经达到了我们想要的效果了~

并且当 count 变化时,也只会重渲染 Counter 组件~

代码优化

其实 _useStore的代码还可以再优化一些,我们可以借助 React 的内置 hooks,useSyncExternalStore 来简化我们的代码

这个 hooks 会自动传一个比较函数给 subscribe,并且第二个参数函数返回的值改变时,会触发这个比较函数~

责任编辑:赵宁宁 来源: 前端之神
相关推荐

2024-08-19 08:48:49

代码渲染组件

2022-06-15 15:09:48

管理工具

2022-07-18 15:48:43

数据库开源工具

2021-02-03 14:04:52

k8spermissionm管理工具

2021-12-16 08:47:56

Vue3 插件Vue应用

2011-08-12 10:38:09

MongoDB

2010-01-15 22:29:11

2020-10-30 11:18:47

网络技术工具

2020-09-30 14:05:22

网络管理

2012-12-06 11:31:40

虚拟化

2009-04-24 21:13:45

服务器虚拟化Vmware

2012-04-09 09:43:49

云计算云管理

2021-03-04 12:55:01

systemd进程管理工具Linux

2013-07-17 09:54:17

2013-07-15 15:00:26

项目管理工具

2014-03-28 11:15:42

phpmyadminMySQL管理

2012-03-01 10:04:02

虚拟化云计算混合云

2023-03-07 14:21:57

2022-05-06 12:04:24

Ansible管理工具

2022-08-03 08:02:46

PDM工具Python
点赞
收藏

51CTO技术栈公众号