[React 进阶系列] useSyncExternalStore hook

[React 进阶系列] useSyncExternalStore hook

前情提要,包括 yup 的实现在这里:yup 基础使用以及 jest 测试

简单的提一下,需要实现的功能是:

  • yup schema 需要访问外部的 storage
  • 外部的 storage 是可变的
  • React 内部也需要访问同样的 storage

基于这几个前提条件,再加上我们的项目已经从 React 17 升级到了 React 18,因此就比较顺利的找到了一个新的 hook:useSyncExternalStore

这个新的 hook 可以监听到 React 外部 store——通常情况下可以是 local storage/session storage 这种——的变化,随后在 React 组件内部去更新对应的状态

官方文档其实解释的比较清楚了,使用 useSyncExternalStore 监听的 store 必须要实现以下两个功能:

  • subscribe

    其作用是一个 subscriber,主要提供的功能在,当变化被监听到时,就会调用当前的 subscriber

    我个人理解,相比于传统的 Consumer/Subscriber 模式,React 提供的这个 hook 是一个弱化的版本,subscriber 的主要目的是为了提示 React 这里有一个状态变化,所以很多情况下还是需要开发手动在 useEffect 中实现对应的功能

    当然,也是可以通过 event emitter 去出发 subscriber 的变化,这点还需要研究一下怎么实现

  • getSnapshot

    这个是会被返回的最新状态

这也是 useSyncExternalStore 必须的两个参数。另一参数是为初始状态,为可选项:

const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)

实现 store

import { useSyncExternalStore } from "react";export class PrerequisiteStore {private prerequisite: string | undefined;private listeners: Set<() => void> = new Set();private initListeners: Set<() => void> = new Set();private isInitialized = false;subscribe(listener: () => void) {this.listeners.add(listener);return () => {this.listeners.delete(listener);};}getSnapshot() {return this.prerequisite;}setPrerequisite(prerequisite: string | undefined) {this.prerequisite = prerequisite;this.isInitialized = true;this.listeners.forEach((listener) => listener());this.initListeners.forEach((listener) => listener());this.initListeners.clear();}onInitialized(cb: () => void) {if (this.isInitialized) {cb();} else {this.initListeners.add(cb);}}
}const prerequisteStore = new PrerequisiteStore();export const getPrerequisite = () => prerequisteStore.getSnapshot();
export const setPrerequisite = (prerequisite: undefined | string) =>prerequisteStore.setPrerequisite(prerequisite);const subscribe = (cb: () => void) => prerequisteStore.subscribe(cb);
const getSnapshot = () => prerequisteStore.getSnapshot();
const getPrerequisiteSnapshot = getSnapshot;export const onPrerequisiteStoreInitialized = (cb: () => void) =>prerequisteStore.onInitialized(cb);export const usePrerequisiteSyncStore = () => {return useSyncExternalStore(subscribe, getSnapshot, getPrerequisiteSnapshot);
};

这个实现方法是用 class……其主要原因是想要基于一个 singleton 实现,这样全局访问 prerequisteStore 的时候只能访问这一个 store

不过同样的问题似乎也可以使用 object 来解决,就像 React 官方文档实现的那样:

// This is an example of a third-party store
// that you might need to integrate with React.// If your app is fully built with React,
// we recommend using React state instead.let nextId = 0;
let todos = [{ id: nextId++, text: "Todo #1" }];
let listeners = [];export const todosStore = {addTodo() {todos = [...todos, { id: nextId++, text: "Todo #" + nextId }];emitChange();},subscribe(listener) {listeners = [...listeners, listener];return () => {listeners = listeners.filter((l) => l !== listener);};},getSnapshot() {return todos;},
};function emitChange() {for (let listener of listeners) {listener();}
}

而且目前的实现实际上是无法自由绑定 listener 的,所以之后可能会修改一下这部分,而且还是需要花点时间琢磨一下 subscribe 这个功能怎么用

使用 store

错误实现

useEffect(() => {setTimeout(() => {setPrerequisite("A");initDemoSchema();}, 1000);setTimeout(() => {setPrerequisite("C");}, 2000);
}, []);useEffect(() => {console.log(prerequisiteStore, new Date().toISOString());if (prerequisiteStore) {const res = demoSchema.cast({});demoSchema.validate(res).then((res) => console.log(res)).catch((e) => {if (e instanceof ValidationError) {console.log(e.path, ",", e.message);}});}
}, [prerequisiteStore]);

这是 App.tsx 中的变化,实现效果如下:

在这里插入图片描述

这里可以看到有个问题,那就是在 useEffect(() => {}, [prerequisiteStore]) 获取变化的时候,第一个 useEffect 没有获取更新的状态

修正

首先 store 的初始化,在当前的版本不是非常的必须,所以这里可以省略掉,直接保留 subscribe 等即可……不过因为测试代码已经添加了的关系,这里不会继续修改。主要就是修改一下 initDemoSchema:

// 重命名
export const updateDemoSchema = (prerequisite: string | undefined) => {if (prerequisite) {demoSchema = demoSchema.shape({enumField: string().required().default(prerequisite).oneOf(Object.keys(getTestEnum() || [])),});}
};

随后在 App.tsx 中更新:

useEffect(() => {setTimeout(() => {setPrerequisite("A");}, 1000);setTimeout(() => {setPrerequisite("C");}, 2000);
}, []);useEffect(() => {console.log(prerequisiteStore, new Date().toISOString());if (prerequisiteStore) {updateDemoSchema(prerequisiteStore);const res = demoSchema.cast({});demoSchema.validate(res).then((res) => console.log(res)).catch((e) => {if (e instanceof ValidationError) {console.log(e.path, ",", e.message);}});}
}, [prerequisiteStore]);

这样就可以实现正常更新了:

在这里插入图片描述

补充:发现之前没有写 initDemoSchema,之前旧的实现大致上没有特别大的区别,不过 prerequisite 的方式是通过 getPrerequisite 获取的。但是我没注意到的是,这只是一个 reference,同时也没有绑定 subscribe,因此这里返回的永远是最初值,也就是在 initialized 后的值,也就是 A

下一步

下一步想做的就是把 schema 的变化抽离出来,并且尝试使用 todo 案例中的 emitChange,这样 schema 的变化就不局限在 component 层级

虽然目前的业务情况来说,1 个 schema 基本上只会被用在 1 个页面上,不过还是想要将其剥离出来,减少对 react 组建的依赖性,而是直接想办法监听 store 的变化

测试代码

这个测试代码写的就比较含糊,基本上就是测试了一下 subscriber 被调用了几次

相对而言比较复杂的实现功能还是得回到 yup schema 去做……这等到实际上有这个需求再说吧,感觉那个写起来太痛苦了

import { PrerequisiteStore } from "../store/prerequisiteStore";describe("PrerequisiteStore", () => {let store: PrerequisiteStore;beforeEach(() => {store = new PrerequisiteStore();});test("should subscribe and unsubscribe listeners", () => {const listener = jest.fn();const unsubscribe = store.subscribe(listener);store.setPrerequisite("test");expect(listener).toHaveBeenCalledTimes(1);// 这里注意每个 subscribe 会返回的那个函数// 调用后就会 unsubscribe 当前行为unsubscribe();store.setPrerequisite("new test");expect(listener).toHaveBeenCalledTimes(1);});test("should return the current state with getSnapshot", () => {expect(store.getSnapshot()).toBeUndefined();store.setPrerequisite("test");expect(store.getSnapshot()).toBe("test");});test("should notify listeners when state changes", () => {const listener1 = jest.fn();const listener2 = jest.fn();store.subscribe(listener1);store.subscribe(listener2);store.setPrerequisite("test");expect(listener1).toHaveBeenCalledTimes(1);expect(listener2).toHaveBeenCalledTimes(1);});test("should handle initialization correctly", () => {const initListener = jest.fn();store.onInitialized(initListener);store.setPrerequisite("test");expect(initListener).toHaveBeenCalledTimes(1);const anotherInitListener = jest.fn();store.onInitialized(anotherInitListener);expect(anotherInitListener).toHaveBeenCalledTimes(1);});test("should clear initListeners after initialization", () => {const initListener = jest.fn();store.onInitialized(initListener);store.setPrerequisite("test");expect(initListener).toHaveBeenCalledTimes(1);store.setPrerequisite("new test");expect(initListener).toHaveBeenCalledTimes(1);});test("should handle multiple initialization listeners correctly", () => {const initListener1 = jest.fn();const initListener2 = jest.fn();store.onInitialized(initListener1);store.onInitialized(initListener2);store.setPrerequisite("test");expect(initListener1).toHaveBeenCalledTimes(1);expect(initListener2).toHaveBeenCalledTimes(1);});
});

event emitter

这里新增一下 event emitter 的实现:

class EventEmitter {private events: { [key: string]: Set<Function> } = {};on(event: string, listener: Function) {if (!this.events[event]) {this.events[event] = new Set();}this.events[event].add(listener);}off(event: string, listener: Function) {if (!this.events[event]) return;this.events[event].delete(listener);}emit(event: string, ...args: any[]) {if (!this.events[event]) return;for (const listener of this.events[event]) {listener(...args);}}
}const eventEmitter = new EventEmitter();
export default eventEmitter;

调用方法也很简单,在 schema 中实现:

eventEmitter.on("prerequisiteChange", updateDemoSchema);

app 中更新代码如下:

useEffect(() => {console.log("Prerequisite Store changed:",prerequisiteStore,new Date().toISOString());if (prerequisiteStore) {const res = demoSchema.cast({});demoSchema.validate(res).then((validatedRes) => console.log(validatedRes)).catch((e: ValidationError) => {console.log("Validation error:", e.path, e.message);});}
}, [prerequisiteStore]);

这样就可以有效的剥离 data schema 和 react component 之间的关系,而是通过事件触发进行正常的更新

最后渲染结果如下:

在这里插入图片描述

有的时候就不得不感叹 React 和 Angular 越到后面越有种……天下文章一大抄的感觉……

比如说这是之前学习 Angular 的 EventEmitter 的使用:

export class CockpitComponent {@Output() serverCreated = new EventEmitter<Omit<ServerElement, "type">>();@Output() blueprintCreated = new EventEmitter<Omit<ServerElement, "type">>();newServerName = "";newServerContent = "";onAddServer() {this.serverCreated.emit({name: this.newServerName,content: this.newServerContent,});}onAddBlueprint() {this.blueprintCreated.emit({name: this.newServerName,content: this.newServerContent,});}
}

学了一下 Angular 还真有助于理解 18 这个新 hook 的运用和延伸……

我感觉下意识的选择 class 可能也是受到了一点 Angular 的影响……

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

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

相关文章

数据库第二次作业

1.建立数据库 2.插入数据 3.完成查询 &#xff08;1&#xff09;、显示所有职工的基本信息。 &#xff08;2&#xff09;、查询所有职工所属部门的部门号&#xff0c;不显示重复的部门号。 &#xff08;3&#xff09;、求出所有职工的人数。 &#xff08;4&#xff09;、列…

iPhone手机上备忘录怎么设置字数显示

在日常生活和工作中&#xff0c;我经常会使用iPhone的备忘录功能来记录一些重要的想法、待办事项或临时笔记。备忘录的便捷性让我可以随时捕捉灵感&#xff0c;但有时候&#xff0c;我也会苦恼于不知道自己记录了多少内容&#xff0c;尤其是在需要控制字数的时候。 想象一下&a…

NAS新品“翻车”后,绿联科技要上市了

在消费电子市场回暖的东风中&#xff0c;又一消费电子知名企业登陆A股。 近日&#xff0c;深圳市绿联科技股份有限公司&#xff08;下称“绿联科技”&#xff09;开启申购&#xff0c;将在创业板上市。本次上市&#xff0c;绿联科技的发行价为21.21元/股&#xff0c;发行数量为…

鸿蒙OpenHarmony Native API【HiLog】

HiLog Overview Description: HiLog模块实现日志打印功能。 开发者可以通过使用这些接口实现日志相关功能&#xff0c;输出日志时可以指定日志类型、所属业务领域、日志TAG标识、日志级别等。 syscap SystemCapability.HiviewDFX.HiLog Since: 8 Summary Files File …

几种基本数据结构

目录 前言 线性结构 链式结构 单链表 双链表​编辑 树形结构 前言 在我们编写程序时&#xff0c;经常会出现需要存储数据的情况&#xff0c;而数据的存储是有讲究的&#xff0c;数据不是在我们的内存中胡乱存储&#xff0c;为了保证数据在进行修改和查找时更加方便&#…

高德api获取天气(详细步骤)

1.登录高德开放平台&#xff0c;点击创建新应用&#xff0c;输入应用名称&#xff0c;选择应用类型&#xff0c;然后点击创建 2.点击添加key&#xff0c;按照以下步骤&#xff1a; 3.然后提交后点开就能看到你的key 4.以下就是示例代码&#xff1a; <!-- 高德获取天气坐标…

扩展PyTorch视觉模型

扩展PyTorch视觉模型 目录 扩展PyTorch视觉模型 一、概述 二、扩展基本视觉模型的原因 1. 性能提升 2. 功能扩展 3. 资源管理 三、扩展PyTorch视觉模型的方法 1.修改现有架构 2.应用模型集成技术 3.量化和压缩模型 四、高级技巧与实践 1.自定义训练循环 2.深度模型…

Visio绘制的CBAM结构图,无水印,可修改,能导出高清图片,可用于论文写作

Visio绘制的CBAM网络结构图,可导出高清图片&#xff0c;可修改&#xff0c;无水印。 方便用于小论文写作&#xff0c;方便用于毕业设计。 Visio版本为2021版&#xff0c;可用更高版本打开。 下载地址&#xff1a;cbam 图片展示&#xff1a;

超算网络体系架构-资源层-平台层-服务层-应用层

目录 超算网络体系架构 我国超算基础设施 超算互联网相关标准研制方面 技术架构 资源层 基础资源 芯片多样 体系异构 高效存储 高速互连 资源池化 可隔离 可计量 互联网络 高带宽 低时延 高安全 平台层 算力接入 资源管理 算力调度 用户管理 交易管理 模…

CVE-2024-24549 Apache Tomcat - Denial of Service

https://lists.apache.org/thread/4c50rmomhbbsdgfjsgwlb51xdwfjdcvg Apache Tomcat输入验证错误漏洞&#xff0c;HTTP/2请求的输入验证不正确&#xff0c;会导致拒绝服务&#xff0c;可以借助该漏洞攻击服务器。 https://mvnrepository.com/artifact/org.apache.tomcat.embed/…

【云原生】Prometheus整合Alertmanager告警规则使用详解

目录 一、前言 二、Altermanager概述 2.1 什么是Altermanager 2.2 Altermanager使用场景 三、Altermanager架构与原理 3.1 Altermanager使用步骤 3.2 Altermanager工作机制 3.3 Altermanager在Prometheus中的位置 四、Altermanager部署与接入Prometheus 4.1 Altermana…

nodejs安装+踩坑报错解决

下载Node.js安装包 官网下载地址&#xff1a;http://nodejs.cn/download/&#xff0c;根据自己电脑选择32位还是64位&#xff0c; 下载地址 选择合适的版本下载 X86是32位的&#xff0c;X64是64位的&#xff0c;我们一般是下载win版X64的msi文件的是点击可以直接启动安装程序的…

深入Redis集群部署:从安装配置到测试验证的完整指南

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f427;Linux基础知识(初学)&#xff1a;点击&#xff01; &#x1f427;Linux高级管理防护和群集专栏&#xff1a;点击&#xff01; &#x1f510;Linux中firewalld防火墙&#xff1a;点击&#xff01; ⏰️创作…

恶补,先验分布,后验分布 ,似然估计

恶补&#xff0c;打一遍增加印象 先验分布后验分布&#xff0c;似然估计 声明&#xff1a;仅记录个人学习&#xff0c;并无其他用途。 先验分布 后验分布&#xff0c; 似然估计 隔壁小哥的故事&#xff1a; 隔壁小哥要去15公里外的一个公园里玩&#xff0c;小哥可以选择步行…

SimMIM:一个类BERT的计算机视觉的预训练框架

1、前言 呃…好久没有写博客了&#xff0c;主要是最近时间比较少。今天来做一期视频博客的内容。本文主要讲SimMIM&#xff0c;它是一个将计算机视觉&#xff08;图像&#xff09;进行自监督训练的框架。 原论文&#xff1a;SimMIM&#xff1a;用于掩码图像建模的简单框架 (a…

IDEA的常见代码模板的使用

《IDEA破解、配置、使用技巧与实战教程》系列文章目录 第一章 IDEA破解与HelloWorld的实战编写 第二章 IDEA的详细设置 第三章 IDEA的工程与模块管理 第四章 IDEA的常见代码模板的使用 第五章 IDEA中常用的快捷键 第六章 IDEA的断点调试&#xff08;Debug&#xff09; 第七章 …

数据实时获取方案之Flink CDC

目录 一、方案描述二、Flink CDC1.1 什么是CDC1.2 什么是Flink CDC1.3 其它CDC1.4 FlinkCDC所支持的数据库情况 二、使用Pipeline连接器实时获取数据2.1 环境介绍2.2 相关版本信息2.3 详细步骤2.3.1 实时获取MySQL数据并发送到Kafka2.3.2 实时获取MySQL数据并同步到Doris数据库…

Ubuntu22.04安装CUDA+CUDNN+Conda+PyTorch

步骤&#xff1a; 1、安装显卡驱动&#xff1b; 2、安装CUDA&#xff1b; 3、安装CUDNN&#xff1b; 4、安装Conda&#xff1b; 5、安装Pytorch。 一、系统和硬件信息 1、Ubuntu 22.04 2、显卡&#xff1a;4060Ti 二、安装显卡驱动 &#xff08;已经安装的可以跳过&a…

秒懂设计模式--学习笔记(11)【结构型-享元模式】

目录 10、享元模式10.1 享元模式10.2 举例10.2.1 马赛克10.2.2 游戏地图&#xff08;以草原地图作为范例&#xff09; 10.3 总结 10、享元模式 10.1 享元模式 “享元”则是共享元件的意思享元模式的英文flyweight是轻量级的意思&#xff0c;这就意味着享元模式能使程序变得更…

Selenium+Pytest自动化测试框架实战

前言# selenium自动化 pytest测试框架 本章你需要 一定的python基础——至少明白类与对象&#xff0c;封装继承 一定的selenium基础——本篇不讲selenium&#xff0c;不会的可以自己去看selenium中文翻译网 测试框架简介# 测试框架有什么优点呢&#xff1a; 代码复用率高&a…