朵小喵儿|鬼才！我居然把 Vue3 的原理用到了 React 上？
前言
vue-next是Vue3的源码仓库 ， Vue3采用lerna做package的划分 ， 而响应式能力@vue/reactivity被划分到了单独的一个package中 。
如果我们想把它集成到React中 ， 可行吗？来试一试吧 。
使用示例
话不多说 ， 先看看怎么用的解解馋吧 。
本文插图
本文插图
可以看出 ， store的定义只用到了@vue/reactivity ， 而rxv只是在组件中做了一层桥接 ， 连通了Vue3和React ， 然后我们就可以尽情的使用Vue3的响应式能力啦 。
我自己是一名从事了多年开发的web前端老程序员 ， 目前辞职在做自己的web前端私人定制课程 ， 今年我花了一个月整理了一份最适合2020年学习的web前端学习干货 ， 各种框架都有整理 ， 送给每一位前端小伙伴 ， 想要获取的可以关注我的***并在后台私信我：前端 ， 即可免费获取 。
预览
本文插图
可以看到 ， 完美的利用了reactive、computed的强大能力 。
分析
从这个包提供的几个核心api来分析：
effect（重点）
effect其实是响应式库中一个通用的概念：观察函数 ， 就像Vue2中的Watcher ， mobx中的autorun ， observer一样 ， 它的作用是收集依赖 。
它接受的是一个函数 ， 它会帮你执行这个函数 ， 并且开启依赖收集 ，
这个函数内部对于响应式数据的访问都可以收集依赖 ， 那么在响应式数据被修改后 ， 就会触发更新 。
最简单的用法
本文插图
那么如果把这个简单例子中的
本文插图
这个函数 ， 替换成React的组件渲染 ， 是不是就能达成响应式更新组件的目的了？
reactive（重点）
响应式数据的核心api ， 这个api返回的是一个proxy ， 对上面所有属性的访问都会被劫持 ， 从而在get的时候收集依赖（也就是正在运行的effect） ， 在set的时候触发更新 。
ref
对于简单数据类型比如number ， 我们不可能像这样去做：
本文插图
这是不符合响应式的拦截规则的 ， 没有办法能拦截到data本身的改变 ， 只能拦截到data身上的属性的改变 ， 所以有了ref 。
本文插图
computed
计算属性 ， 依赖值更新以后 ， 它的值也会随之自动更新 。 其实computed内部也是一个effect 。
拥有在computed中观察另一个computed数据、effect观察computed改变之类的高级特性 。
实现
从这几个核心api来看 ， 只要effect能接入到React系统中 ， 那么其他的api都没什么问题 ， 因为它们只是去收集effect的依赖 ， 去通知effect触发更新 。
effect接受的是一个函数 ， 而且effect还支持通过传入schedule参数来自定义依赖更新的时候需要触发什么函数 ， 如果我们把这个schedule替换成对应组件的更新呢？要知道在hook的世界中 ， 实现当前组件强制更新可是很简单的：
useForceUpdate
本文插图
这是一个很经典的自定义hook ， 通过不断的把状态+1来强行让组件渲染 。
而rxv的核心api: useStore接受的也是一个函数selector ， 它会让用户自己选择在组件中需要访问的数据 。
那么思路就显而易见了：
把selector包装在effect中执行 ， 去收集依赖 。
指定依赖发生更新时 ， 需要调用的函数是当前正在使用useStore的这个组件的forceUpdate强制渲染函数 。
【朵小喵儿|鬼才！我居然把 Vue3 的原理用到了 React 上？】这样不就实现了数据变化 ， 组件自动更新吗？
简单的看一下核心实现
useStore和Provider
本文插图
这个option是传递给Vue3的effectapi ，
scheduler规定响应式数据更新以后应该做什么操作 ， 这里我们使用forceUpdate去让组件重新渲染 。
lazy表示延迟执行 ， 后面我们手动调用effection来执行
本文插图
再来看下useEffection和useForceUpdate
本文插图
也很简单 ， 就是把传入的函数交给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中就不能只返回这个数组本身 。
举一个例子：
本文插图
这段代码直接在useStore中返回了整段jsx ， 是因为map的过程中回去访问数组的每一项来收集依赖 ， 只有这样才能达到响应式的目的 。
源码地址
如果你喜欢这个库 ， 欢迎给出你的star? ， 你的支持就是我最大的动力~
本文插图
作者：程序员的青春链接：
推荐阅读
- 糯米小红花送你一朵小红花
- 送你一朵小红花 曲奇饼干 新年饼干 不需模具
- 送你一朵小红花——饼干
- #安佳一口“新”年味# 送你一朵小花面包，可可爱爱很好吃哟
- 简单懒人菜一朵小红花酥，打败周一综合征
- 鬼才|炉石传说截图鬼才，预览看似马桶搋，一看是乌龟，腐蚀成了蜗牛？
- 鬼才|大妈在高校快递站帮拆快递收纸箱 学生：商业鬼才
- 明日之后第三季|明日之后第三季：自由基建培养建筑鬼才，飞机口沦为“重灾区”！
- 鹿晗被邓超陈赫带偏？录综艺用裤衩擦嘴引发热议：省钱鬼才没错了
- 搞宁王心态？斗鱼举办官方“金鞋杯”刷野竞速赛，网友：起名鬼才