40行代码把Vue3的响应式集成进React做状态管理
时间:2022-07-26
本文章向大家介绍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 className="chunk">
<div className="chunk">store中的count现在是 {countState.count}div>
<div className="chunk">computed值中的plusOne现在是 {countState.plusOne.value}div>
<Button onClick={mutations.add}>addButton>
div>
Card>
);
}
export default () => {
return (
<Provider value={store}>
<Count />
Provider>
);
};
复制代码
可以看出,store
的定义只用到了@vue/reactivity
,而rxv
只是在组件中做了一层桥接,连通了Vue3和React,然后我们就可以尽情的使用Vue3的响应式能力啦。
预览
可以看到,完美的利用了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)
//
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法