前言

嗨，我是Hogan
目前在經營自己的自媒體 hogan.tech
主要分享一些有關於程式碼、軟體和科技業經驗分享
有興趣的讀者可以進一步關注我，進而獲得更多資訊唷！

未來文章一併更新於此網站 Hogan.B Lab
並且包含多語系 繁體中文、英文、日文、簡體中文
觀看分類：React 白話文運動、其他系列

如果想要快速查找其他文章請點選目錄

成立 hogan.tech 的初衷是
希望每個正在這條路上探索的人，
都可以透過 Hogan.tech 嘗試進入程式領域。

前一篇則是介紹透過Flux概念

形成的React 狀態管理 - Redux

1. 複習Flux
2. Redux 概念
3. Redux 組成

這一篇會介紹另一種狀態管理- Zustand

1. 為什麼會想要分享這個技術？
2. 關於狀態管理
3. Zustand 是什麼？

為什麼會想要分享這個技術？

Zustatnd 本身是一個相較於Redux，較為新穎的技術，也是我在工作時，團隊嘗試導入的前端狀態管理技術。透過實際的導入，有一些心得以及想法，才產生了寫這篇文章的念頭。

無論是使用Redux或是Context來去處理狀態管理，相對於Zustand都比較複雜，對於之後再加入此專案的工程師來說，勢必又是需要花時間去理解的。Zustand最主要的目標就是讓前端狀態管理，相對簡潔易懂，這樣的特性，也讓Zustand成為一些公司的選擇

關於狀態管理

在介紹Zustand之前，要來講講「狀態管理」是什麼？

現行網頁越來越複雜，也有了前端與後端的分別，其中前端比較偏向畫面呈現、UI \ UX、使用者流程、不同裝置有無跑版...等等。後端比較偏功能上的實作，包含資料庫管理、登入、註冊...等等。

那麼針對前端越來越複雜，也開始有了框架的概念，而現行流行的三大框架，分別為React、Vue、Angular。不同框架也會有不同的「狀態管理」方式，例如：

React ：基本上只需要管理資料，並且由「狀態」來去渲染

Vue：有資料與元件的「雙向綁定」

而基於React這個框架而言，又可以大致上可以分為

• Local State
  • useState
  • useReducer
• Context
  • useContext
• Third Party
  • Redux
  • Mobx
  • Zustand

看到這邊應該可以理解，光是一個React框架中的「狀態管理」就已經相當複雜了。

因此這篇只會針對Zustand來進行講解，也會用實例來進行介紹。

我們也可以透過以下的套件下載總量對比來知道，過去一年中Redux、Mobx、Zustand盛行程度。

https://npmtrends.com/mobx-vs-react-redux-vs-zustand

Zustand 是什麼？

根據Zustand官方說法，這是一個輕量、快速，基於Flux以及Hook概念出現的「狀態管理」套件。

p.s. 上面那隻熊是Zustand標誌性的吉祥物！

其中Zustand 也是為了解決一些複雜的React狀態管理問題，例如：Zombie Child Problem、React Concurrency、Context Loss。

如果想要更了解這些問題是什麼的話，可以參考以下連結

Zombie Child Problem：React Redux 文件

https://react-redux.js.org/api/hooks#stale-props-and-zombie-children

React Concurrency：React 官方文件

https://17.reactjs.org/docs/concurrent-mode-intro.html

React Context Loss：Stack Overflow

https://stackoverflow.com/questions/66721202/issue-with-react-context-context-lost-on-page-refresh

我們也可以透過Zustand官方知道他們想要擊敗Redux的野心

結語

這一篇分成兩篇，這一篇會簡單的講解Zustand 是什麼

以及複習一下狀態管理有哪些種類

下一篇會繼續講解Zustand的用法

如果有任何建議與疑問也歡迎留言！

如果喜歡此系列文章，請不吝於按下喜歡及分享，讓更多人看到唷～