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,它会让用户自己选择在组件中需要访问的数据。

那么思路就显而易见了:

  1. 把selector包装在effect中执行,去收集依赖。
  2. 指定依赖发生更新时,需要调用的函数是当前正在使用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而已。

流程

  1. 先通过useForceUpdate在当前组件中注册一个强制更新的函数。
  2. 通过useContext读取用户从Provider中传入的store。
  3. 再通过Vue的effect去帮我们执行selector(store),并且指定scheduler为forceUpdate,这样就完成了依赖收集。
  4. 那么在store里的值更新了以后,触发了scheduler也就是forceUpdate,我们的React组件就自动更新啦。

就简单的几行代码,就实现了在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 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(重点)

响应式数据的核心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,它会让用户自己选择在组件中需要访问的数据。

那么思路就显而易见了:

  1. 把selector包装在effect中执行,去收集依赖。
  2. 指定依赖发生更新时,需要调用的函数是当前正在使用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而已。

流程

  1. 先通过useForceUpdate在当前组件中注册一个强制更新的函数。
  2. 通过useContext读取用户从Provider中传入的store。
  3. 再通过Vue的effect去帮我们执行selector(store),并且指定scheduler为forceUpdate,这样就完成了依赖收集。
  4. 那么在store里的值更新了以后,触发了scheduler也就是forceUpdate,我们的React组件就自动更新啦。

就简单的几行代码,就实现了在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 class key={idx}>  
        {log}  
      </p>  
    ));  
  });  
  
  return (  
    <Card hoverable>  
      <h1>控制台</h1>  
      <div class>{logs}</div>  
    </Card>  
  );  
}  
复制代码

这段代码直接在useStore中返回了整段jsx,是因为map的过程中回去访问数组的每一项来收集依赖,只有这样才能达到响应式的目的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  •  最近学习了下Vue3的源码,抽空写一些自己对3.x源码的解读,同时算是学习的一个总结吧,也能加深自己的印象。 就...
    勤奋的大鱼阅读 1,054评论 2 3
  • 什么是数据响应式 从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom...
    ST_Pace阅读 1,362评论 3 11
  • 在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0...
    前端优选阅读 1,288评论 0 4
  • VUE2.0 的响应式原理 本篇文章篇幅较长,已经对2.0响应式原理熟悉的可直接跳过此部分,各取所需,共同交流 在...
    ElvisYang1993阅读 1,124评论 0 3
  • 每一天都是新的一天 你不知道你会遇见谁 也不知道将会看到什么样的风景 云儿每天变幻着舞姿 街边又长出新的蓓蕾 昨日...
    Angel李子汐阅读 587评论 25 40