朵小喵儿|Vue3 的原理用到了 React 上？，鬼才！我居然把前言vue-next是Vue3的源码仓库

前言
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来强行让组件渲染。

朵小喵儿|Vue3 的原理用到了 React 上？，鬼才！我居然把

推荐阅读

洛瑞|西帝洛瑞合砍45分22篮板9助攻，猛龙把系列赛比分打成2-2

微信账号不用了怎么办如何注销微信账号

豆浆机的简单美食食谱

量子生活科技|证明孩子发育很好，父母大可放宽心，9~10个月宝宝有这几个表现

[项目]广东多个田野考古项目复工，水下考古暂缓

糯米內金粥民間方的功效与作用

霍思燕|杜江夫妇游拉萨被偶遇，霍思燕脸部发胖异常，颜值输给素人

手机芯片价格才是王道，顶级华为低至2669元，麒麟990+40W快充

飞鱼心语|别失信，别忘恩，别伤人心！，做人

看图识物 n.18 | 快准狠，Razer 无线外设三件套

如何培养学生写作兴趣,提高写作能力?如何培养学生写作兴趣_1

无需换车，华为不到2000元的车载智慧屏真香

山西霍州面塑的代表作是什么山西民间艺术霍州面塑流行地区

「移动支付」移动支付立功：抢劫案十年降9成，这届劫匪碰上支付宝太难了

安卓哥@三星，而非苹果，正在引领下一个激动人心的手机变革：可折叠产品

爵士鼓怎么样爵士鼓好不好

新华网|台风“海神”过境韩国致2人失踪[组图]

夏木生可|现在，蹲班房的就是我了，要不是你安排别人去

【国际在线】2019年十大立法脉络

坦洋工夫红茶的健康功效