面試官：請你在React中引入Vue3的@vue/reactivity，實現響應式。

前言

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

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

rxv狀態管理庫

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 = {
  // mutation
  add,
};

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。

一些痛點

根據我本身的見解，我先簡單的總結一下現有的狀態管理庫中或多或少存在的一些不足之處：

1. 以redux爲表明的，語法比較冗餘，樣板文件比較多。
2. mobx很好，可是也須要單獨的學一套api，對於react組件的侵入性較強，裝飾器語法不穩定。
3. unstated-next是一個極簡的框架，對於React Hook作了一層較淺的封裝。
4. 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。可是極簡也帶來了一些問題：

1. 模塊之間沒有相互訪問的能力。
2. Context的性能問題，讓你須要關注模塊的劃分。（具體能夠看我這篇文章的性能章節）
3. 模塊劃分的問題，若是全放在一個Provider，那麼更新的粒度太大，全部用了useContext的組件都會重複渲染。若是放在多個Provider裏，那麼就會回到第一條痛點，這些模塊之間是相互獨立的，無法互相訪問。
4. hook帶來的一些心智負擔的問題。React Hooks 你真的用對了嗎？

react-easy-state

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

那其實轉而一想，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，它會讓用戶本身選擇在組件中須要訪問的數據。

那麼思路就顯而易見了：

1. 把selector包裝在effect中執行，去收集依賴。
2. 指定依賴發生更新時，須要調用的函數是當前正在使用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;
};
複製代碼

1. 先經過useForceUpdate在當前組件中註冊一個強制更新的函數。
2. 經過useContext讀取用戶從Provider中傳入的store。
3. 再經過Vue的effect去幫咱們執行selector(store)，而且指定scheduler爲forceUpdate，這樣就完成了依賴收集。

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

優勢：

1. 直接引入@vue/reacivity，徹底使用Vue3的reactivity能力，擁有computed, effect等各類能力，而且對於Set和Map也提供了響應式的能力。後續也會隨着這個庫的更新變得更加完善的和強大。
2. vue-next倉庫內部完整的測試用例。
3. 完善的TypeScript類型支持。
4. 徹底複用@vue/reacivity實現超強的全局狀態管理能力。
5. 狀態管理中組件級別的精確更新。
6. Vue3老是要學的嘛，提早學習防止失業！

缺點：

1. 因爲須要精確的收集依賴全靠useStore，因此selector函數必定要精確的訪問到你關心的數據。甚至若是你須要觸發數組內部某個值的更新，那你在useStore中就不能只返回這個數組自己。

舉一個例子：

function Logger() {
  const logs = useStore((store: Store) => {
    return store.state.logs.map((log, idx) => (
      <p className="log" key={idx}> {log} </p>
    ));
  });

  return (
    <Card hoverable> <h1>控制檯</h1> <div className="logs">{logs}</div> </Card>
  );
}
複製代碼

這段代碼直接在useStore中返回了整段jsx，是由於map的過程當中回去訪問數組的每一項來收集依賴，只有這樣才能達到響應式的目的。

源碼地址

github.com/sl1673495/r…

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