react usecontext_鬼才!我居然把 Vue3 的原理用到了 React 上?
前言
vue-next是Vue3的源码仓库,Vue3采用lerna做package的划分,而响应式能力@vue/reactivity被划分到了单独的一个package中。
如果我们想把它集成到React中,可行吗?来试一试吧。
使用示例
话不多说,先看看怎么用的解解馋吧。
![](/assets/blank.gif)
![](/assets/blank.gif)
可以看出,store的定义只用到了@vue/reactivity,而rxv只是在组件中做了一层桥接,连通了Vue3和React,然后我们就可以尽情的使用Vue3的响应式能力啦。
我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年我花了一个月整理了一份最适合2020年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。
预览
![](/assets/blank.gif)
可以看到,完美的利用了reactive、computed的强大能力。
分析
从这个包提供的几个核心api来分析:
effect(重点)
effect其实是响应式库中一个通用的概念:观察函数,就像Vue2中的Watcher,mobx中的autorun,observer一样,它的作用是收集依赖。
它接受的是一个函数,它会帮你执行这个函数,并且开启依赖收集,
这个函数内部对于响应式数据的访问都可以收集依赖,那么在响应式数据被修改后,就会触发更新。
最简单的用法
![](/assets/blank.gif)
那么如果把这个简单例子中的
![](/assets/blank.gif)
这个函数,替换成React的组件渲染,是不是就能达成响应式更新组件的目的了?
reactive(重点)
响应式数据的核心api,这个api返回的是一个proxy,对上面所有属性的访问都会被劫持,从而在get的时候收集依赖(也就是正在运行的effect),在set的时候触发更新。
ref
对于简单数据类型比如number,我们不可能像这样去做:
![](/assets/blank.gif)
这是不符合响应式的拦截规则的,没有办法能拦截到data本身的改变,只能拦截到data身上的属性的改变,所以有了ref。
![](/assets/blank.gif)
computed
计算属性,依赖值更新以后,它的值也会随之自动更新。其实computed内部也是一个effect。
拥有在computed中观察另一个computed数据、effect观察computed改变之类的高级特性。
实现
从这几个核心api来看,只要effect能接入到React系统中,那么其他的api都没什么问题,因为它们只是去收集effect的依赖,去通知effect触发更新。
effect接受的是一个函数,而且effect还支持通过传入schedule参数来自定义依赖更新的时候需要触发什么函数,如果我们把这个schedule替换成对应组件的更新呢?要知道在hook的世界中,实现当前组件强制更新可是很简单的:
useForceUpdate
![](/assets/blank.gif)
这是一个很经典的自定义hook,通过不断的把状态+1来强行让组件渲染。
而rxv的核心api: useStore接受的也是一个函数selector,它会让用户自己选择在组件中需要访问的数据。
那么思路就显而易见了:
把selector包装在effect中执行,去收集依赖。
指定依赖发生更新时,需要调用的函数是当前正在使用useStore的这个组件的forceUpdate强制渲染函数。
这样不就实现了数据变化,组件自动更新吗?
简单的看一下核心实现
useStore和Provider
![](/assets/blank.gif)
这个option是传递给Vue3的effectapi,
scheduler规定响应式数据更新以后应该做什么操作,这里我们使用forceUpdate去让组件重新渲染。
lazy表示延迟执行,后面我们手动调用effection来执行
![](/assets/blank.gif)
再来看下useEffection和useForceUpdate
![](/assets/blank.gif)
也很简单,就是把传入的函数交给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中就不能只返回这个数组本身。
举一个例子:
![](/assets/blank.gif)
这段代码直接在useStore中返回了整段jsx,是因为map的过程中回去访问数组的每一项来收集依赖,只有这样才能达到响应式的目的。
源码地址
https://github.com/sl1673495/react-composition-api
如果你喜欢这个库,欢迎给出你的star✨,你的支持就是我最大的动力~
![](/assets/blank.gif)
作者:程序员的青春
链接:https://www.jianshu.com/p/8458d3930f8f
react usecontext_鬼才!我居然把 Vue3 的原理用到了 React 上?相关推荐
- 鬼才!我居然把 Vue3 的原理用到了 React 上?
前言 vue-next是Vue3的源码仓库,Vue3采用lerna做package的划分,而响应式能力@vue/reactivity被划分到了单独的一个package中. 如果我们想把它集成到Reac ...
- react 监听组合键_投资组合中需要的5个React项目
react 监听组合键 You've put in the work and now you have a solid understanding of the React library. 您已经完 ...
- react 日期怎么格式化_手写React的Fiber架构,深入理解其原理
熟悉React的朋友都知道,React支持jsx语法,我们可以直接将HTML代码写到JS中间,然后渲染到页面上,我们写的HTML如果有更新的话,React还有虚拟DOM的对比,只更新变化的部分,而不重 ...
- react页面数据过多怎么办_性能!!让你的 React 组件跑得再快一点,收藏
性能和渲染(Render)正相关 React 基于虚拟 DOM 和高效 Diff 算法的完美配合,实现了对 DOM 最小粒度的更新.大多数情况下,React 对 DOM 的渲染效率足以我们的业务日常. ...
- React的source code init时会自动检测Chrome dev tool的react extension装了没
Sent: Friday, 19 February, 2016 5:41 PM React的source code init时会自动检测Chrome dev tool的react extension装 ...
- react安装_超全面详细一条龙教程!从零搭建React项目全家桶(上篇)
React是近几年来前端项目开发非常火的一个框架,其背景是Facebook团队的技术支持,市场占有率也很高.很多初学者纠结一开始是学react还是vue.个人觉得,有时间的话,最好两个都掌握一下.从学 ...
- react中的状态机_在基于状态图的状态机上使用React的模式
react中的状态机 by Shawn McKay 肖恩·麦凯(Shawn McKay) 在基于状态图的状态机上使用React的模式 (Patterns for using React with St ...
- 免费的React课程,通过构建聊天应用程序来提高您的React JS技能
Chat is eating the world, and React is eating front-end development. So what could be better than le ...
- react 小程序转换_如何将AngularJS 1.x应用程序转换为React应用程序-一次转换一个组件。
react 小程序转换 Angular and React are both great frameworks/libraries. Angular provides a defined struct ...
最新文章
- 卫星覆盖分析品质 FOM
- mysql读写分离,主从配置
- JSON.parse()和SON.stringify()
- tomcat常见错误处理
- CSocketFile类
- 四叶草引导windows和linux,Windows环境下使用Clover四叶草引导双硬盘安装OSX 10.11.5原版镜像...
- 为AWT的机器人创建DSL
- TensorFlow 实例一:线性回归模型
- maven中的oracle,maven中安装SQL SERVER 和 Oracle JDBC驱动
- linux下weblogic12c建域,三、WebLogic 12C集群部署-创建域
- 如何造一个移动端的联动选择器(三)
- SAP License:SAP凭证编号中跳号问题处理
- 名词解释——元数据和数据字典
- Oracle优化器详解,通宵整理,透彻超详细
- C# 如何生成CHM帮助文件
- oneos组件系列02:ws2812全彩LED
- MACBOOK 连接不上wifi的解决办法
- aes在tomcat解密中文乱码,在控制台解密中文不是乱码
- 【javaEE】网络原理(传输层Part2)
- Ubuntu16.04安装搜狗输入法,以及解决不能输入中文的办法
热门文章
- One Day-XML:XSL
- GridView简单创建序号列
- 改变你人生态度的30个关键词
- 我的世界服务器物品展示框,我的世界怎么展示框物品 展示框攻略
- html里面超链接alt_前端html--超链接,表格,表单属性
- python setdefault函数_python 字典 setdefault()和get()方法比较详解
- php curl http2,用php做ios http2推送服务遇到的坑
- python文本文档_python 文本文件操作
- 大疆口袋相机美颜怎么设置_大疆口袋小相机DJI Pocket 2套装版深度评测:变成生产力工具...
- Tournament CodeForces - 27B(dfs)