前言

React的狀態管理是一個繽紛繁雜的大世界，光我知道的就不下數十種，其中有最出名immutable陣營的redux，有mutable陣營的mobx，react-easy-state，在hooks誕生后還有極簡主義的unstated-next，有螞蟻金服的大佬出品的hox、hoox。

其實社區誕生這么多種狀態管理框架，也說明狀態管理庫之間都有一些讓人不滿足的地方。

rxv是我依據這些痛點，并且直接引入了Vue3的package: @vue/reactivity去做的一個React狀態管理框架，下面先看一個簡單的示例：

示例

// store.ts import { reactive, computed, effect } from '@vue/reactivity';export const state = reactive({count: 0, });const plusOne = computed(() => state.count + 1);effect(() => {console.log('plusOne changed: ', plusOne); });const add = () => (state.count += 1);export const mutations = {// mutationadd, };export const store = {state,computed: {plusOne,}, };export type Store = typeof store; // Index.tsx import { Provider, useStore } from 'rxv' import { mutations, store, Store } from './store.ts' function Count() {const countState = useStore((store: Store) => {const { state, computed } = store;const { count } = state;const { plusOne } = computed;return {count,plusOne,};});return (<Card hoverable style={{ marginBottom: 24 }}><h1>計數器</h1><div className="chunk"><div className="chunk">store中的count現在是 {countState.count}</div><div className="chunk">computed值中的plusOne現在是 {countState.plusOne.value}</div><Button onClick={mutations.add}>add</Button></div></Card>); }export default () => {return (<Provider value={store}><Count /></Provider>); };

可以看出，store的定義只用到了@vue/reactivity，而rxv只是在組件中做了一層橋接，連通了Vue3和React，正如它名字的含義：React x Vue。

一些痛點

根據我自己的看法，我先簡單的總結一下現有的狀態管理庫中或多或少存在的一些不足之處：

以redux為代表的，語法比較冗余，樣板文件比較多。

mobx很好，但是也需要單獨的學一套api，對于react組件的侵入性較強，裝飾器語法不穩定。

unstated-next是一個極簡的框架，對于React Hook做了一層較淺的封裝。

react-easy-state引入了observe-util，這個庫對于響應式的處理很接近Vue3，我想要的了。

下面展開來講：

options-based的痛點

Vuex和dva的options-based的模式現在看來弊端多多。具體的可以看尤大在vue-composition-api文檔中總結的。

簡單來說就是一個組件有好幾個功能點，但是這幾個功能點在分散在data,methods,computed中，形成了一個雜亂無章的結構。

當你想維護一個功能，你不得不先完整的看完這個配置對象的全貌。

心驚膽戰的去掉幾行，改掉幾行，說不定會遺留一些沒用的代碼，也或者隱藏在computed選項里的某個相關的函數悄悄的坑了你...

而hook帶來的好處是更加靈活的代碼組織方式。

redux

直接引入dan自己的吐槽吧，要學的概念太多，寫一個簡單的功能要在五個文件之間跳來跳去，好頭疼。redux的弊端在社區被討論也不是一天兩天了，相信寫過redux的你也是深有同感。

unstated-next

unstated-next其實很不錯了，源碼就40來行。最大程度的利用了React Hook的能力，寫一個model就是寫一個自定義hook。但是極簡也帶來了一些問題：

模塊之間沒有相互訪問的能力。

Context的性能問題，讓你需要關注模塊的劃分。（具體可以看我這篇文章的性能章節）

模塊劃分的問題，如果全放在一個Provider，那么更新的粒度太大，所有用了useContext的組件都會重復渲染。如果放在多個Provider里，那么就會回到第一條痛點，這些模塊之間是相互獨立的，沒法互相訪問。

hook帶來的一些心智負擔的問題。React Hooks 你真的用對了嗎？

react-easy-state

這個庫引入的observe-util其實和Vue3 reactivity部分的核心實現很相似，關于原理解析也可以看我之前寫的兩篇文章：帶你徹底搞懂Vue3的Proxy響應式原理！TypeScript從零實現基于Proxy的響應式庫。帶你徹底搞懂Vue3的Proxy響應式原理！基于函數劫持實現Map和Set的響應式。

似乎不維護了。

對于異步隊列的處理過于hack，帶來了很多issue，而且一直沒有解決。

那其實轉而一想，Vue3 reactivity其實是observe-util的強化版，它擁有了更多的定制能力，如果我們能把這部分直接接入到狀態管理庫中，豈不是完全擁有了Vue3的響應式能力。

原理分析

vue-next是Vue3的源碼倉庫，Vue3采用lerna做package的劃分，而響應式能力@vue/reactivity被劃分到了單獨的一個package中

從這個包提供的幾個核心api來分析：

effect

effect其實是響應式庫中一個通用的概念：觀察函數，就像Vue2中的Watcher，mobx中的autorun，observer一樣，它的作用是收集依賴。

它接受的是一個函數，這個函數內部對于響應式數據的訪問都可以收集依賴，那么在響應式數據更新后，就會觸發響應的更新事件。

reactive

響應式數據的核心api，這個api返回的是一個proxy，對上面所有屬性的訪問都會被劫持，從而在get的時候收集依賴（也就是正在運行的effect），在set的時候觸發更新。

ref

對于簡單數據類型比如number，我們不可能像這樣去做：

let data = reactive(2) // oops data = 5

這是不符合響應式的攔截規則的，沒有辦法能攔截到data本身的改變，只能攔截到data身上的屬性的改變，所以有了ref。

const data = ref(2) // ok data.value= 5

computed

計算屬性，依賴值更新以后，它的值也會隨之自動更新。其實computed內部也是一個effect。

擁有在computed中觀察另一個computed數據、effect觀察computed改變之類的高級特性。

實現

從這幾個核心api來看，只要effect能接入到React系統中，那么其他的api都沒什么問題，因為它們只是去收集effect的毅力，去通知effect觸發更新。

effect接受的是一個函數，而且effect還支持通過傳入schedule參數來自定義依賴更新的時候需要觸發什么函數，

而rxv的核心api: useStore接受的也是一個函數selector，它會讓用戶自己選擇在組件中需要訪問的數據。

那么思路就顯而易見了：

把selector包裝在effect中執行，去收集依賴。

指定依賴發生更新時，需要調用的函數是當前正在使用useStore的這個組件的forceUpdate強制渲染函數。

這樣不就實現了數據變化，組件自動更新嗎？

簡單的看一下核心實現

export const useStore = <T, S>(selector: Selector<T, S>): S => {const forceUpdate = useForceUpdate();const store = useStoreContext();const effection = useEffection(() => selector(store), {scheduler: forceUpdate,lazy: true,});const value = effection();return value; };

先通過useForceUpdate在當前組件中注冊一個強制更新的函數。

通過useContext讀取用戶從Provider中傳入的store。

再通過Vue的effect去幫我們執行selector(store)，并且指定scheduler為forceUpdate，這樣就完成了依賴收集。

就簡單的幾行代碼，就實現了在React中使用@vue/reactivity中的所有能力。

優點：

直接引入@vue/reacivity，完全使用Vue3的reactivity能力，擁有computed, effect等各種能力，并且對于Set和Map也提供了響應式的能力。后續也會隨著這個庫的更新變得更加完善的和強大。

vue-next倉庫內部完整的測試用例。

完善的TypeScript類型支持。

完全復用@vue/reacivity實現超強的全局狀態管理能力。

狀態管理中組件級別的精確更新。

Vue3總是要學的嘛，提前學習防止失業！

缺點：

由于需要精確的收集依賴全靠useStore，所以selector函數一定要精確的訪問到你關心的數據。甚至如果你需要觸發數組內部某個值的更新，那你在useStore中就不能只返回這個對象本身。

源碼地址

https://github.com/sl1673495/react-composition-api

如果你喜歡這個庫，歡迎給出你的star?，你的支持就是我最大的動力~

總結

以上是生活随笔為你收集整理的react全局状态管理_rxv: 在React中用Vue3的reactivity包实现状态管理。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。