朵小喵儿|Vue3 的原理用到了 React 上？，鬼才！我居然把( 二 )
而rxv的核心api:useStore接受的也是一个函数selector ， 它会让用户自己选择在组件中需要访问的数据 。
那么思路就显而易见了：
把selector包装在effect中执行 ， 去收集依赖 。
指定依赖发生更新时 ， 需要调用的函数是当前正在使用useStore的这个组件的forceUpdate强制渲染函数 。
这样不就实现了数据变化 ， 组件自动更新吗？
简单的看一下核心实现
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? ， 你的支持就是我最大的动力~
文章图片
【朵小喵儿|Vue3 的原理用到了 React 上？，鬼才！我居然把】作者：程序员的青春链接：
推荐阅读
![[项目]广东多个田野考古项目复工，水下考古暂缓](https://pic.nfapp.southcn.com/nfplus/ossfs/pic/xy/202003/10/b708c5d2-63cb-4171-bec6-77d2f41b222d.jpe)
![新华网|台风“海神”过境韩国致2人失踪[组图]](https://mz.eastday.com/20133129.jpeg)
- 朵小喵儿|华为能挺过去吗？，美国“断供令”正式生效
- 朵小喵儿|也许该学学熊，来场冬眠了，狼性的华为
- 朵小喵儿|轻薄机身+强劲性能+无线充电，三星将推“性价比”旗舰手机
- 朵小喵儿|如何在电脑上刷
- 朵小喵儿|长得像也是错？美国海关搞乌龙：错把一加耳机认成AirPods
- 朵小喵儿|35亿！华为英国建厂：研发芯片