react usecontext_Vue3原理实战运用,我用40行代码把他装进了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的响应式能力啦。

预览

844be8a7f14c824a68f00d7b6b463f7e.gif
gif

可以看到,完美的利用了reactive、computed的强大能力。

分析

从这个包提供的几个核心api来分析:

effect(重点)

effect其实是响应式库中一个通用的概念:观察函数,就像Vue2中的Watcher,mobx中的autorunobserver一样,它的作用是收集依赖

它接受的是一个函数,它会帮你执行这个函数,并且开启依赖收集,

这个函数内部对于响应式数据的访问都可以收集依赖,那么在响应式数据被修改后,就会触发更新。

最简单的用法

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)
// ?oops
data = 5

这是不符合响应式的拦截规则的,没有办法能拦截到data本身的改变,只能拦截到data身上的属性的改变,所以有了ref。

const data = ref(2)
// ?ok
data.value= 5

computed

计算属性,依赖值更新以后,它的值也会随之自动更新。其实computed内部也是一个effect。

拥有在computed中观察另一个computed数据、effect观察computed改变之类的高级特性。

实现

从这几个核心api来看,只要effect能接入到React系统中,那么其他的api都没什么问题,因为它们只是去收集effect的依赖,去通知effect触发更新。

effect接受的是一个函数,而且effect还支持通过传入schedule参数来自定义依赖更新的时候需要触发什么函数,如果我们把这个schedule替换成对应组件的更新呢?要知道在hook的世界中,实现当前组件强制更新可是很简单的:

useForceUpdate

export const useForceUpdate = () => {
  const [, forceUpdate] = useReducer(s => s + 1, 0);
  return forceUpdate;
};

这是一个很经典的自定义hook,通过不断的把状态+1来强行让组件渲染。

rxv的核心api: useStore接受的也是一个函数selector,它会让用户自己选择在组件中需要访问的数据。

那么思路就显而易见了:

  1. selector包装在effect中执行,去收集依赖。
  2. 指定依赖发生更新时,需要调用的函数是当前正在使用useStore的这个组件的forceUpdate强制渲染函数。

这样不就实现了数据变化,组件自动更新吗?

简单的看一下核心实现

useStore和Provider

import React, { useContext } from 'react';
import { useForceUpdate, useEffection } from './share';

type Selector = (store: T) => S;const StoreContext = React.createContext(null);const useStoreContext = () => {const contextValue = useContext(StoreContext);if (!contextValue) {throw new Error('could not find store context value; please ensure the component is wrapped in a ',
    );
  }return contextValue;
};/**
 * 在组件中读取全局状态
 * 需要通过传入的函数收集依赖
 */export const useStore = (selector: Selector): S => {
  const forceUpdate = useForceUpdate();
  const store = useStoreContext();
  const effection = useEffection(() => selector(store), {
    scheduler: forceUpdate,
    lazy: true,
  });
  const value = effection();
  return value;
};
export const Provider = StoreContext.Provider;

这个option是传递给Vue3的effectapi,

scheduler规定响应式数据更新以后应该做什么操作,这里我们使用forceUpdate去让组件重新渲染。

lazy表示延迟执行,后面我们手动调用effection来执行


{
  scheduler: forceUpdate,
  lazy: true,
}

再来看下useEffectionuseForceUpdate

import { useEffect, useReducer, useRef } from 'react';
import { effect, stop, ReactiveEffect } from '@vue/reactivity';

export const useEffection = (...effectArgs: Parameters<typeof effect>) => {
  // 用一个ref存储effection
  // effect函数只需要初始化执行一遍
  const effectionRef = useRef();if (!effectionRef.current) {
    effectionRef.current = effect(...effectArgs);
  }// 卸载组件后取消effectconst stopEffect = () => {
    stop(effectionRef.current!);
  };
  useEffect(() => stopEffect, []);return effectionRef.current
};export const useForceUpdate = () => {const [, forceUpdate] = useReducer(s => s + 1, 0);return forceUpdate;
};

也很简单,就是把传入的函数交给effect,并且在组件销毁的时候停止effect而已。

流程

  1. 先通过useForceUpdate在当前组件中注册一个强制更新的函数。
  2. 通过useContext读取用户从Provider中传入的store。
  3. 再通过Vue的effect去帮我们执行selector(store),并且指定scheduler为forceUpdate,这样就完成了依赖收集。
  4. 那么在store里的值更新了以后,触发了scheduler也就是forceUpdate,我们的React组件就自动更新啦。

就简单的几行代码,就实现了在React中使用@vue/reactivity中的所有能力。

优点:

  1. 直接引入@vue/reacivity,完全使用Vue3的reactivity能力,拥有computed, effect等各种能力,并且对于Set和Map也提供了响应式的能力。后续也会随着这个库的更新变得更加完善的和强大。
  2. vue-next仓库内部完整的测试用例。
  3. 完善的TypeScript类型支持。
  4. 完全复用@vue/reacivity实现超强的全局状态管理能力。
  5. 状态管理中组件级别的精确更新。
  6. Vue3总是要学的嘛,提前学习防止失业!

缺点:

  1. 由于需要精确的收集依赖全靠useStore,所以selector函数一定要精确的访问到你关心的数据。甚至如果你需要触发数组内部某个值的更新,那你在useStore中就不能只返回这个数组本身。

举一个例子:

function Logger() {
  const logs = useStore((store: Store) => {
    return store.state.logs.map((log, idx) => (
      <p className="log" key={idx}>
        {log}p>
    ));
  });

  return (
    <Card hoverable><h1>控制台h1><div className="logs">{logs}div>Card>
  );
}

这段代码直接在useStore中返回了整段jsx,是因为map的过程中回去访问数组的每一项来收集依赖,只有这样才能达到响应式的目的。

源码地址

https://github.com/sl1673495/react-composition-api

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370691.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring MVC –自定义RequestMappingHandlerMapping

在xml bean定义文件中使用<mvc&#xff1a;annotation-driven />配置Spring MVC时&#xff0c;在内部将一个名为RequestMappingHandlerMapping的组件注册到Spring MVC。 该组件或通常是HandlerMapping组件负责将请求URI路由到处理程序&#xff0c;这些处理程序是使用Requ…

css的三个特性 背景透明设置

关于行内元素&#xff08;补充一点&#xff09; 行内元素只能容纳文本或其他行内元素。&#xff08;a特殊a里面可以放块级元素&#xff09; 例子&#xff1a; 关于行高tip: 选择器的嵌套层级不应大于3级&#xff0c;位置靠后的限定条件应尽可能的精确。 属性定义必须另起一行…

比较容易犯的一些智障错误(不定时修改)

无论在什么学习中&#xff0c;在成长的过程中&#xff0c;注定要犯一些错误&#xff0c;有些比较高级的错误&#xff0c;有些是比较智障的错误。那么在oi的学习中&#xff0c;我们最讨厌的就是一些智障的小错误&#xff0c;因为如果是大错误的话一般情况下在测试样例的时候都是…

ccs安装多版本编译器离线_大数据分析:学习工具JDK,在线安装指南

hadoop是使用Java语言开发的并且Hadoop运行需要有Java环境的支持&#xff0c;因此在安装hadoop之前需要安装Java开发环境即JDK(Java Development Kit)。安装前首先向大家介绍以一下本文会用到的几个词&#xff1a;JAVA_HOME:一是为了方便引用&#xff0c;比如&#xff0c;JDK安…

HTML基础入门学习准备篇

在学习前端的开始&#xff0c;让我们一起来了解什么是HTML5时代的大前端开发和全栈开发的定义传统的前端&#xff1a;切图-标签和样式-实现效果H5时代的前端&#xff1a;一、需要各端的兼容开发二、可以用于APP开发和移动站点的开发三、Ajax服务器端技术开发四、高级设计模式和…

asp.net尚未在web服务器上注册_最新版Web服务器项目详解 00 项目概述

点 击 关 注 上 方&#xff02;两猿社&#xff02;设 为&#xff02;置 顶 或 星 标&#xff02;&#xff0c;干 货 第 一 时 间 送 达。互 联 网 猿 | 两 猿 社TineyWebServerLinux下C轻量级Web服务器&#xff0c;助力初学者快速实践网络编程&#xff0c;搭建属于自己的服务器…

python正则r的作用_Python正则表达式,这一篇就够了!

原标题&#xff1a;Python正则表达式&#xff0c;这一篇就够了&#xff01;大多数编程语言的正则表达式设计都师从Perl&#xff0c;所以语法基本相似&#xff0c;不同的是每种语言都有自己的函数去支持正则&#xff0c;今天我们就来学习 Python中关于 正则表达式的函数。re模块…

服务器微信了早上好,每天早上好的问候语 微信早安问候语合集66句

1、没有伞的孩子&#xff0c;必须努力奔跑&#xff01;早安&#xff01;2、你不能改变过去&#xff0c;但你可以改变未来。早安&#xff01;3、坚持了才叫梦想&#xff0c;放弃了就只是妄想。早安&#xff01;4、忘掉失败&#xff0c;不过要牢记失败中的教训。早安&#xff01;…

如何得到某个文件的旧版本

下载某个文件的旧版本 如果想要得到某个文件的旧版本&#xff0c;只需在该文件上单击右键&#xff0c;选择Updata to revision…即可。 系统会提示输入版本号。 例如要下载soc_1的第五个版本&#xff0c;只需填入5即可。如图7。 查看完版本5的文件后&#xff0c;如果想在此回到…

Google Guava EventBus和Java 7 WatchService用于事件编程

这篇文章将介绍如何使用Guava EventBus将更改发布到Java 7 WatchService检测到的目录或子目录中。 Guava EventBus是向应用程序添加发布/订阅通信的好方法。 Java 7 java.nio.file软件包中新增的WatchService用于监视目录中的更改。 由于EventBus和WatchService已在以前的文章中…

Bootstrap-table 部分浏览器显示不出来

一、问题 近日&#xff0c;写了一个ASP.Net项目&#xff0c;但是bootstrap-table在别人的电脑上显示不出来&#xff0c;在自己的电脑上能显示&#xff0c;有些浏览器也是能显示&#xff0c;但部分浏览器就是显示不出来。找了很多原因&#xff0c;最后有个老师和我说是内核版本的…

DBMS-基本概念

文件处理系统&#xff08;file-processing system&#xff09;的主要弊端&#xff1a; 数据冗余和不一致&#xff08;data redundancy and inconsistency&#xff09;、数据访问困难&#xff08;difficulty in accessing data&#xff09;、数据孤立&#xff08;data isolation…

python多大孩子可以学_孩子学编程最佳年龄是多大

儿童编程教育已经悄悄地掀起了编程低龄化的热浪。但是很多人会疑惑&#xff0c;到底孩子学编程最佳年龄是多少呢&#xff1f;下面小编就为大家解答一下。孩子学编程最佳年龄 首先&#xff0c;孩子的学习黄金时期是非常重要的。从6岁开始&#xff0c;大多数孩子都可以掌握对基本…

上传文件到华为云云服务器,上传文件到云服务器

上传文件到云服务器 内容精选换一换登录Windows操作系统的弹性云服务器时&#xff0c;需使用密码方式登录。因此&#xff0c;用户需先根据创建弹性云服务器时使用的密钥文件&#xff0c;获取该弹性云服务器初始安装时系统生成的管理员密码(Administrator帐户或Cloudbase-init设…

JUnit规则

第一次偶然发现JUnit Rule批注时&#xff0c;我对此概念有些恼火。 在测试用例中拥有一个公共领域似乎有些奇怪&#xff0c;因此我不愿意定期使用它。 但是一段时间后&#xff0c;我习惯了这一点&#xff0c;事实证明&#xff0c;规则可以通过多种方式简化编写测试的过程。 这篇…

微pe工具箱是微软的吗_微PE工具箱V2.0更新10内核

本帖最后由 韦小宝2 于 2017-3-22 21:26 编辑微PE工具箱V2.0发布更新了&#xff0c;链接&#xff1a;http://pan.baidu.com/s/1c9whpO 转载自无忧论坛 07年&#xff0c;第一个XP内核通用PE工具箱发布。17年&#xff0c;第一个WIN10内核的微PE工具箱就此诞生。64位纯内核&#x…

jq实现轮播图

之前设计了一个校团委网站&#xff0c;里面有一个轮播图效果&#xff0c;上网后查看了许多方法&#xff0c;觉得下面这个方法最为适用&#xff0c;记录下来 js代码&#xff1a; $(document).ready(function () {//无缝切换轮播var i 0;//索引var clone $(".banner .imgL…

关于图片预加载的思考

引子&#xff1a; 很多时候&#xff0c;我们在写html页面的时候&#xff0c;当需要在页面中加入图片时&#xff0c;我们很自然地把图片直接用<img>标签放在了<body>里面&#xff0c;这本来是没有多大问题的。 但是当图片数量很多的时候&#xff0c;问题就来了。H…

oracle安装中桌面模式与服务器模式的去别

桌面模式只能本机使用。 服务器模式可以在网络中使用&#xff0c;也就是网络中的其他服务器可以使用。 所以安装时&#xff0c;如果是生产环境肯定是服务器模式。一般也都是服务器模式。 转载于:https://www.cnblogs.com/zhjx0521/p/7803691.html

python不能创建字典的是_用Python创建带有重复键的字典

用Python创建带有重复键的字典 我有以下列表&#xff0c;其中包含重复的具有不同值的汽车注册号。 我想将其转换为字典&#xff0c;该字典接受汽车登记号的多个键。 到目前为止&#xff0c;当我尝试将列表转换为字典时&#xff0c;它消除了键之一。 如何制作具有重复键的字典&a…