40行程序把Vue3的響應式集成進React做狀態管理

本文參考原文-http://bjbsair.com/2020-03-22/tech-info/2095.html

40行代碼把Vue3的響應式集成進React做狀態管理

前言

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

如果我們想把它集成到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 class>  
        <div class>store中的count現在是 {countState.count}</div>  
        <div class>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，然后我們就可以盡情的使用Vue3的響應式能力啦。

預覽

40行代碼把Vue3的響應式集成進React做狀態管理

可以看到，完美的利用了reactive、computed的強大能力。

分析

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

effect（重點）

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

它接受的是一個函數，它會幫你執行這個函數，并且開啟依賴收集，

這個函數內部對于響應式數據的訪問都可以收集依賴，那么在響應式數據被修改后，就會觸發更新。

最簡單的用法

const data = reactive({ count: 0 })  
effect(() => {  
    // 就是這句話 訪問了data.count  
    // 從而收集到了依賴  
    console.log(data.count)  
})  
  
data.count = 1  
// 控制臺打印出1  
復制代碼

那么如果把這個簡單例子中的

() => {  
    // 就是這句話 訪問了data.count  
    // 從而收集到了依賴  
    console.log(data.count)  
}  
復制代碼

這個函數，替換成React的組件渲染，是不是就能達成響應式更新組件的目的了？

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參數來自定義依賴更新的時候需要觸發什么函數，如果我們把這個schedule替換成對應組件的更新呢？要知道在hook的世界中，實現當前組件強制更新可是很簡單的：

useForceUpdate

export const useForceUpdate = () => {  
  const [, forceUpdate] = useReducer(s => s + 1, 0);  
  return forceUpdate;  
};  
復制代碼

這是一個很經典的自定義hook，通過不斷的把狀態+1來強行讓組件渲染。

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

那么思路就顯而易見了：

把selector包裝在effect中執行，去收集依賴。
指定依賴發生更新時，需要調用的函數是當前正在使用useStore的這個組件的forceUpdate強制渲染函數。

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

簡單的看一下核心實現

useStore和Provider

import React, { useContext } from 'react';  
import { useForceUpdate, useEffection } from './share';  
  
type Selector<T, S> = (store: T) => S;  
  
const StoreContext = React.createContext<any>(null);  
  
const useStoreContext = () => {  
  const contextValue = useContext(StoreContext);  
  if (!contextValue) {  
    throw new Error(  
      'could not find store context value; please ensure the component is wrapped in a <Provider>',  
    );  
  }  
  return contextValue;  
};  
  
/**  
 * 在組件中讀取全局狀態  
 * 需要通過傳入的函數收集依賴  
 */  
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;  
};  
  
export const Provider = StoreContext.Provider;  
  
復制代碼

這個option是傳遞給Vue3的effectapi，

scheduler規定響應式數據更新以后應該做什么操作，這里我們使用forceUpdate去讓組件重新渲染。

lazy表示延遲執行，后面我們手動調用effection來執行

  
{  
  scheduler: forceUpdate,  
  lazy: true,  
}  
復制代碼

再來看下useEffection和useForceUpdate

import { useEffect, useReducer, useRef } from 'react';  
import { effect, stop, ReactiveEffect } from '@vue/reactivity';  
  
export const useEffection = (...effectArgs: Parameters<typeof effect>) => {  
  // 用一個ref存儲effection  
  // effect函數只需要初始化執行一遍  
  const effectionRef = useRef<ReactiveEffect>();  
  if (!effectionRef.current) {  
    effectionRef.current = effect(...effectArgs);  
  }  
  
  // 卸載組件后取消effect  
  const stopEffect = () => {  
    stop(effectionRef.current!);  
  };  
  useEffect(() => stopEffect, []);  
  
  return effectionRef.current  
};  
  
export const useForceUpdate = () => {  
  const [, forceUpdate] = useReducer(s => s + 1, 0);  
  return forceUpdate;  
};  
復制代碼

也很簡單，就是把傳入的函數交給effect，并且在組件銷毀的時候停止effect而已。

流程

先通過useForceUpdate在當前組件中注冊一個強制更新的函數。
通過useContext讀取用戶從Provider中傳入的store。
再通過Vue的effect去幫我們執行selector(store)，并且指定scheduler為forceUpdate，這樣就完成了依賴收集。
那么在store里的值更新了以后，觸發了scheduler也就是forceUpdate，我們的React組件就自動更新啦。

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

優點：

直接引入@vue/reacivity，完全使用Vue3的reactivity能力，擁有computed, effect等各種能力，并且對于Set和Map也提供了響應式的能力。后續也會隨著這個庫的更新變得更加完善的和強大。
vue-next倉庫內部完整的測試用例。
完善的TypeScript類型支持。
完全復用@vue/reacivity實現超強的全局狀態管理能力。
狀態管理中組件級別的精確更新。
Vue3總是要學的嘛，提前學習防止失業！

缺點：

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

舉一個例子：

function Logger() {  
  const logs = useStore((store: Store) => {  
    return store.state.logs.map((log, idx) => (  
      <p class key={idx}>  
        {log}  
      </p>  
    ));  
  });  
  
  return (  
    <Card hoverable>  
      <h1>控制臺</h1>  
      <div class>{logs}</div>  
    </Card>  
  );  
}  
復制代碼

這段代碼直接在useStore中返回了整段jsx，是因為map的過程中回去訪問數組的每一項來收集依賴，只有這樣才能達到響應式的目的。
本文參考原文-http://bjbsair.com/2020-03-22/tech-info/2095/

40行代碼把Vue3的響應式集成進React做狀態管理

前言

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

如果我們想把它集成到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 class>  
        <div class>store中的count現在是 {countState.count}</div>  
        <div class>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，然后我們就可以盡情的使用Vue3的響應式能力啦。

預覽

40行代碼把Vue3的響應式集成進React做狀態管理

可以看到，完美的利用了reactive、computed的強大能力。

分析

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

effect（重點）

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

它接受的是一個函數，它會幫你執行這個函數，并且開啟依賴收集，

這個函數內部對于響應式數據的訪問都可以收集依賴，那么在響應式數據被修改后，就會觸發更新。

最簡單的用法

const data = reactive({ count: 0 })  
effect(() => {  
    // 就是這句話 訪問了data.count  
    // 從而收集到了依賴  
    console.log(data.count)  
})  
  
data.count = 1  
// 控制臺打印出1  
復制代碼

那么如果把這個簡單例子中的

() => {  
    // 就是這句話 訪問了data.count  
    // 從而收集到了依賴  
    console.log(data.count)  
}  
復制代碼

這個函數，替換成React的組件渲染，是不是就能達成響應式更新組件的目的了？

reactive（重點）

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觸發更新。

useForceUpdate

export const useForceUpdate = () => {  
  const [, forceUpdate] = useReducer(s => s + 1, 0);  
  return forceUpdate;  
};  
復制代碼

這是一個很經典的自定義hook，通過不斷的把狀態+1來強行讓組件渲染。

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

那么思路就顯而易見了：

把selector包裝在effect中執行，去收集依賴。
指定依賴發生更新時，需要調用的函數是當前正在使用useStore的這個組件的forceUpdate強制渲染函數。

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

簡單的看一下核心實現

useStore和Provider

import React, { useContext } from 'react';  
import { useForceUpdate, useEffection } from './share';  
  
type Selector<T, S> = (store: T) => S;  
  
const StoreContext = React.createContext<any>(null);  
  
const useStoreContext = () => {  
  const contextValue = useContext(StoreContext);  
  if (!contextValue) {  
    throw new Error(  
      'could not find store context value; please ensure the component is wrapped in a <Provider>',  
    );  
  }  
  return contextValue;  
};  
  
/**  
 * 在組件中讀取全局狀態  
 * 需要通過傳入的函數收集依賴  
 */  
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;  
};  
  
export const Provider = StoreContext.Provider;  
  
復制代碼

這個option是傳遞給Vue3的effectapi，

scheduler規定響應式數據更新以后應該做什么操作，這里我們使用forceUpdate去讓組件重新渲染。

lazy表示延遲執行，后面我們手動調用effection來執行

  
{  
  scheduler: forceUpdate,  
  lazy: true,  
}  
復制代碼

再來看下useEffection和useForceUpdate

import { useEffect, useReducer, useRef } from 'react';  
import { effect, stop, ReactiveEffect } from '@vue/reactivity';  
  
export const useEffection = (...effectArgs: Parameters<typeof effect>) => {  
  // 用一個ref存儲effection  
  // effect函數只需要初始化執行一遍  
  const effectionRef = useRef<ReactiveEffect>();  
  if (!effectionRef.current) {  
    effectionRef.current = effect(...effectArgs);  
  }  
  
  // 卸載組件后取消effect  
  const stopEffect = () => {  
    stop(effectionRef.current!);  
  };  
  useEffect(() => stopEffect, []);  
  
  return effectionRef.current  
};  
  
export const useForceUpdate = () => {  
  const [, forceUpdate] = useReducer(s => s + 1, 0);  
  return forceUpdate;  
};  
復制代碼

也很簡單，就是把傳入的函數交給effect，并且在組件銷毀的時候停止effect而已。

流程

先通過useForceUpdate在當前組件中注冊一個強制更新的函數。
通過useContext讀取用戶從Provider中傳入的store。
再通過Vue的effect去幫我們執行selector(store)，并且指定scheduler為forceUpdate，這樣就完成了依賴收集。
那么在store里的值更新了以后，觸發了scheduler也就是forceUpdate，我們的React組件就自動更新啦。

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

優點：

直接引入@vue/reacivity，完全使用Vue3的reactivity能力，擁有computed, effect等各種能力，并且對于Set和Map也提供了響應式的能力。后續也會隨著這個庫的更新變得更加完善的和強大。
vue-next倉庫內部完整的測試用例。
完善的TypeScript類型支持。
完全復用@vue/reacivity實現超強的全局狀態管理能力。
狀態管理中組件級別的精確更新。
Vue3總是要學的嘛，提前學習防止失業！

缺點：

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

舉一個例子：

function Logger() {  
  const logs = useStore((store: Store) => {  
    return store.state.logs.map((log, idx) => (  
      <p class key={idx}>  
        {log}  
      </p>  
    ));  
  });  
  
  return (  
    <Card hoverable>  
      <h1>控制臺</h1>  
      <div class>{logs}</div>  
    </Card>  
  );  
}  
復制代碼

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

最后編輯于：2020.04.03 23:03:19

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 228,119評論 6贊 531
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 98,382評論 3贊 415
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 176,038評論 0贊 373
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 62,853評論 1贊 309
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 71,616評論 6贊 408
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,112評論 1贊 323
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,192評論 3贊 441
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,355評論 0贊 288
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 48,869評論 1贊 334
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 40,727評論 3贊 354
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 42,928評論 1贊 369
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,467評論 5贊 358
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,165評論 3贊 347
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,570評論 0贊 26
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 35,813評論 1贊 282
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 51,585評論 3贊 390
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 47,892評論 2贊 372

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

40行程序把Vue3的響應式集成進React做狀態管理

40行程序把Vue3的響應式集成進React做狀態管理

前言

使用示例

預覽

分析

effect（重點）

reactive（重點）

ref

computed

實現

useForceUpdate

useStore和Provider

流程

優點：

缺點：

前言

使用示例

預覽

分析

effect（重點）

reactive（重點）

ref

computed

實現

useForceUpdate

useStore和Provider

流程

優點：

缺點：

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

40行程序把Vue3的響應式集成進React做狀態管理

前言

使用示例

預覽

分析

effect（重點）

reactive（重點）

ref

computed

實現

useForceUpdate

useStore和Provider

流程

優點：

缺點：

前言

使用示例

預覽

分析

effect（重點）

reactive（重點）

ref

computed

實現

useForceUpdate

useStore和Provider

流程

優點：

缺點：

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频