狀態管理的產生

• 為什麼需要狀態管理

  狀態管理伴隨着現代前端框架的崛起而誕生，在經典的單頁應用中，組件內部狀態隨着組件的掛載而產生，銷燬而銷燬，全局狀態則隨着應用掛載而一直存在，這時候，全局狀態的共享，傳遞，變更就被抽離出來成了一個通用的解決方案。

  Vue與React都有較為簡單的全局狀態管理策略（Store模式，Context），但是當應用足夠複雜，全局狀態較多的時候，還是需要第三方的狀態管理庫進行統一管理。

• React體系的狀態管理

  相比於Vue的官方推薦，React由於官方並沒有明確推薦庫，實際情況就會更錯綜複雜一些。在早期階段，Redux基本佔據了最主流位置，但是由於其過於繁瑣的模版代碼，讓前期開發與後期維護都變得麻煩至極，Mobx脱穎而出，被很多開發者認可而使用。直到React 16.8版本引入了Hooks，Redux受到越來越多的批評，狀態管理庫也隨着發生了一些變化。Redux加入了Redux Toolkit，Recoil的出現，pmndrs三大狀態管理Zustand、Jotai、Valtio的崛起，還有小眾的Rematch, Hookstate, Akita，React狀態管理庫更加的百花齊放。

下一代狀態管理庫

• Redux與Mobx的問題

  Redux因其繁瑣冗長的語法與特性，讓開發者往往要寫大量的模版代碼，加上異步處理需要用到複雜度更高的Redux中間件，讓開發者不勝其煩。話雖如此，在最新的npm trends中，Redux的下載量還是居高不下，因為經過多年的考驗，社區的生態與解決方案也是最為完備的，如果現在需要使用Redux，那麼注意一定要使用其官方推薦的Redux Toolkit，寫法簡化了很多。

  Mobx是一個響應式編程庫，相比於Redux少了很多模版代碼，不過由於其理念與React不太相符，被稱為沒有template的Vue，有很多類似於Vue的新增概念，比如observable, computed, reaction, autorun...對於新人來説多了更多的心智負擔，再加上其對代碼的結構與實現沒有限制，會讓團隊中狀態管理的代碼比較凌亂，Mobx也始終沒能取代Redux。

• Zustand、Jotai、Valtio

  這次我們重點需要介紹的，是pmndrs所屬的三個狀態管理庫，pmndrs是一個開源開發者集體，開源了很多有新意或者細分領域的工具，這三個狀態管理庫的主要開發者都是Daishi Kato。由於React狀態管理庫的長期混沌狀態，沒有一個庫能接替Redux的大旗一統全局，三個狀態庫都是為不同的細分領域而存在。

  Zustand，為替代Redux而生，也是現階段推薦大家使用的狀態管理庫，它的npm下載量已經和老牌選手Mobx不相上下了，並且增長趨勢十分可觀。

  

  其最主要的特點就是api極其簡潔，打包後的大小僅為1kb，但是功能上卻能完美替代Redux，被越來越多的開發者推薦。

  既然有個這麼優秀的Redux替代品，為什麼pmndrs還要推出另外兩個庫呢？這裏就不得不先説Recoil，這是Facebook內部創建的庫，在20年5月被Dave McCabe在演講中公佈了出來，後來被開源。這個庫帶來了一個新的理念，原子狀態。Redux維護的全局狀態一般是對象形式，裏面包含了多個狀態，被封裝成一個整體的store。Recoil則是將狀態分割為一個一個的最小單元，這與Hooks的理念是一致的。因為Recoil有着Facebook官方背景，加上新的狀態管理理念徹底拋棄了Redux的固有的思路，與Hooks深度契合，所以一經面世就有很大的關注度。但是因為Recoil的api設計的有些怪異和繁瑣，也一直沒有很大的發展態勢。而Jotai這個庫，就是從Recoil理念借鑑而來的，但是提供了一套更簡潔明瞭的api，為得是能讓原子狀態這個理念更好的發展下去。

  Valtio則是與Mobx類似的庫，實現原理也是與Vue類似，使用Proxy攔截對象的讀寫操作，可以通過直接改變對象屬性的值，來實現響應式渲染更新。相比於Mobx，Valtio有着更簡單直接的api，更低的上手難度，大有取而代之之意。

  總的來説，如果你因為項目原因需要使用Redux，那麼使用Redux Toolkit。否則的話，我更推薦大家使用更簡潔輕量的下一代狀態管理庫，使用Zustand替代Redux，Jotai替代Recoil，Valtio替代Mobx。