zustand

zustand 是一個(gè) React 的輕量級(jí)狀態(tài)管理工具庫(kù)，用起來(lái)非常方便，不僅支持多模塊創(chuàng)建狀態(tài)管理，還可以使用 hook + selector 的方式，在組件內(nèi)去獲取所需的狀態(tài)變量，我個(gè)人是感覺(jué)跟 Vue Pinia 有點(diǎn)相似，以下是一個(gè)簡(jiǎn)單的小例子，展示 zustand 的基本使用。

圖片

點(diǎn)擊按鈕的時(shí)候，會(huì)通過(guò) increase方法去修改狀態(tài)管理內(nèi)部的 count。

圖片

按需重渲染

什么是按需重渲染？就比如當(dāng) count 變化時(shí)，只有需要使用到 count 的組件才會(huì)重新渲染，沒(méi)用到 count 的就不用重渲染，減少不必要的渲染！

就比如我按了按鈕之后，只有 Counter 這個(gè)組件會(huì)重渲染，而 App 卻不會(huì)。

圖片

因?yàn)?nbsp;count 只被 Counter 組件所選擇到了，所以當(dāng)count變化時(shí)，Counter 會(huì)重渲染。

圖片

源碼實(shí)現(xiàn)

實(shí)現(xiàn) create

圖片

我們可以借著上面的代碼例子，來(lái)一步步實(shí)現(xiàn) zustand 的源碼，先把引入的代碼給注釋掉，接下來(lái)我們自己來(lái)實(shí)現(xiàn) create。

其實(shí) zustand的源碼量非常至少，并且也很容易讀懂，無(wú)非就分成幾步：

1、聲明一個(gè) create 函數(shù)，用來(lái)創(chuàng)建狀態(tài)管理

圖片

2、維護(hù)一個(gè)狀態(tài)管理 state，用來(lái)存放狀態(tài)變量

3、聲明兩個(gè)函數(shù) set、get，一個(gè)是設(shè)置

4、維護(hù)一個(gè)訂閱集合 subscribe，收集訂閱方，且當(dāng) set的時(shí)候，通知 subscribe 中的所有訂閱方

圖片

5、準(zhǔn)備一個(gè) hooks 返回給使用者，并且需要準(zhǔn)備一些材料，包括set、get、訂閱入口

圖片

以上就實(shí)現(xiàn)了 create這個(gè)函數(shù)~

圖片

實(shí)現(xiàn) _useStore

接下來(lái)實(shí)現(xiàn) _useStore，其實(shí)他就做一件事：對(duì)比一下被選擇的值，對(duì)比他修改前后是否相等，不相等的話就強(qiáng)制重渲染本組件。

強(qiáng)制重渲染可以巧妙借助useReducer這個(gè)內(nèi)置 hooks 來(lái)實(shí)現(xiàn)：

圖片

達(dá)到效果

現(xiàn)在已經(jīng)達(dá)到了我們想要的效果了！

圖片

并且當(dāng) count 變化時(shí)，也只會(huì)重渲染 Counter 組件！

圖片

代碼優(yōu)化

其實(shí) _useStore的代碼還可以再優(yōu)化一些，我們可以借助 React 的內(nèi)置 hooks，useSyncExternalStore 來(lái)簡(jiǎn)化我們的代碼。

這個(gè) hooks 會(huì)自動(dòng)傳一個(gè)比較函數(shù)給 subscribe，并且第二個(gè)參數(shù)函數(shù)返回的值改變時(shí)，會(huì)觸發(fā)這個(gè)比較函數(shù)。

圖片

圖片