React 中hooks之useSyncExternalStore使用总结
1. 基本概念
useSyncExternalStore 是 React 18 引入的一个 Hook,用于订阅外部数据源,确保在并发渲染下数据的一致性。它主要用于:
- 订阅浏览器 API(如 window.width)
- 订阅第三方状态管理库
- 订阅任何外部数据源
1.1 基本语法
const state = useSyncExternalStore(subscribe, // 订阅函数getSnapshot, // 获取当前状态的函数getServerSnapshot // 可选:服务端渲染时获取状态的函数
);
2. 基础示例
2.1 订阅窗口大小变化
getSnapshot 是一个函数,用于返回当前浏览器窗口的宽度和高度。window.innerWidth 和 window.innerHeight 分别获取浏览器窗口的宽度和高度。
该函数返回一个对象,包含 width 和 height 两个属性。
subscribe 函数接受一个回调函数 callback,并将其作为事件监听器绑定到 resize 事件上。
每当浏览器窗口的尺寸发生变化时,resize 事件会触发,进而调用 callback。
subscribe 函数还返回一个清理函数(return () => window.removeEventListener(‘resize’, callback)),用于在组件卸载时移除事件监听器,防止内存泄漏。
当callback回调触发的时候就会触发组件更新
function useWindowSize() {const getSnapshot = () => ({width: window.innerWidth,height: window.innerHeight});const subscribe = (callback) => {window.addEventListener('resize', callback);return () => window.removeEventListener('resize', callback);};return useSyncExternalStore(subscribe, getSnapshot);
}function WindowSizeComponent() {const { width, height } = useWindowSize();return (<div>Window size: {width} x {height}</div>);
}
2.2 订阅浏览器在线状态
function useOnlineStatus() {const getSnapshot = () => navigator.onLine;const subscribe = (callback) => {window.addEventListener('online', callback);window.addEventListener('offline', callback);return () => {window.removeEventListener('online', callback);window.removeEventListener('offline', callback);};};return useSyncExternalStore(subscribe, getSnapshot);
}function OnlineStatusComponent() {const isOnline = useOnlineStatus();return (<div>Status: {isOnline ? '在线' : '离线'}</div>);
}
3. 进阶用法
3.1 创建自定义存储
useTodoStore 是一个自定义 Hook,它使用了 useSyncExternalStore 来同步外部存储(即 todoStore)的状态。
todoStore.subscribe:订阅状态更新。每当 todoStore 中的状态变化时,useSyncExternalStore 会触发重新渲染。
todoStore.getSnapshot:获取当前的状态快照,在此返回的对象包含 todos 和 filter。
function createStore(initialState) {let state = initialState;const listeners = new Set();return {subscribe(listener) {listeners.add(listener);return () => listeners.delete(listener);},getSnapshot() {return state;},setState(newState) {state = newState;listeners.forEach(listener => listener());}};
}const todoStore = createStore({todos: [],filter: 'all'
});function useTodoStore() {return useSyncExternalStore(todoStore.subscribe,todoStore.getSnapshot);
}function TodoList() {const { todos, filter } = useTodoStore();return (<ul>{todos.filter(todo => filter === 'all' || todo.completed === (filter === 'completed')).map(todo => (<li key={todo.id}>{todo.text}</li>))}</ul>);
}
3.2 与服务端渲染集成
function useSharedState(initialState) {const store = useMemo(() => createStore(initialState), [initialState]);// 提供服务端快照const getServerSnapshot = () => initialState;return useSyncExternalStore(store.subscribe,store.getSnapshot,getServerSnapshot);
}
3.3 订阅 WebSocket 数据
function useWebSocketData(url) {const [store] = useState(() => {let data = null;const listeners = new Set();const ws = new WebSocket(url);ws.onmessage = (event) => {data = JSON.parse(event.data);listeners.forEach(listener => listener());};return {subscribe(listener) {listeners.add(listener);return () => {listeners.delete(listener);if (listeners.size === 0) {ws.close();}};},getSnapshot() {return data;}};});return useSyncExternalStore(store.subscribe, store.getSnapshot);
}function LiveDataComponent() {const data = useWebSocketData('wss://api.example.com/live');if (!data) return <div>Loading...</div>;return (<div><h2>实时数据</h2><pre>{JSON.stringify(data, null, 2)}</pre></div>);
}
4. 性能优化
4.1 选择性订阅
function useStoreSelector(selector) {const store = useContext(StoreContext);const getSnapshot = useCallback(() => {return selector(store.getSnapshot());}, [store, selector]);return useSyncExternalStore(store.subscribe,getSnapshot);
}// 使用示例
function TodoCounter() {const count = useStoreSelector(state => state.todos.length);return <div>Total todos: {count}</div>;
}
4.2 避免不必要的更新
function createStoreWithSelector(initialState) {let state = initialState;const listeners = new Map();return {subscribe(listener, selector) {const wrappedListener = () => {const newSelectedValue = selector(state);if (newSelectedValue !== selector(previousState)) {listener();}};listeners.set(listener, wrappedListener);return () => listeners.delete(listener);},getSnapshot() {return state;},setState(newState) {const previousState = state;state = newState;listeners.forEach(listener => listener());}};
}
5. 实际应用场景
5.1 主题切换系统
function createThemeStore() {let theme = 'light';const listeners = new Set();return {subscribe(listener) {listeners.add(listener);return () => listeners.delete(listener);},getSnapshot() {return theme;},toggleTheme() {theme = theme === 'light' ? 'dark' : 'light';listeners.forEach(listener => listener());}};
}const themeStore = createThemeStore();function useTheme() {return useSyncExternalStore(themeStore.subscribe,themeStore.getSnapshot);
}function ThemeToggle() {const theme = useTheme();return (<button onClick={() => themeStore.toggleTheme()}>Current theme: {theme}</button>);
}
5.2 表单状态管理
function createFormStore(initialValues) {let values = initialValues;const listeners = new Set();return {subscribe(listener) {listeners.add(listener);return () => listeners.delete(listener);},getSnapshot() {return values;},updateField(field, value) {values = { ...values, [field]: value };listeners.forEach(listener => listener());},reset() {values = initialValues;listeners.forEach(listener => listener());}};
}function useForm(initialValues) {const [store] = useState(() => createFormStore(initialValues));return useSyncExternalStore(store.subscribe,store.getSnapshot);
}function Form() {const formData = useForm({ name: '', email: '' });return (<form><inputvalue={formData.name}onChange={e => formStore.updateField('name', e.target.value)}/><inputvalue={formData.email}onChange={e => formStore.updateField('email', e.target.value)}/></form>);
}
6. 注意事项
-
保持一致性
- subscribe 函数应该返回清理函数
- getSnapshot 应该返回不可变的数据
-
避免频繁更新
- 考虑使用节流或防抖
- 实现选择性订阅机制
-
服务端渲染
- 提供 getServerSnapshot
- 确保服务端和客户端状态同步
-
内存管理
- 及时清理订阅
- 避免内存泄漏
通过合理使用 useSyncExternalStore,我们可以安全地订阅外部数据源,并确保在 React 并发渲染下的数据一致性。这个 Hook 特别适合需要与外部系统集成的场景。 还可以用来实现浏览器localStrorage的持久化存储
相关文章:
React 中hooks之useSyncExternalStore使用总结
1. 基本概念 useSyncExternalStore 是 React 18 引入的一个 Hook,用于订阅外部数据源,确保在并发渲染下数据的一致性。它主要用于: 订阅浏览器 API(如 window.width)订阅第三方状态管理库订阅任何外部数据源 1.1 基…...
C++11新特性之decltype
1.decltype的作用 decltype是C11新增的一个关键字,与auto的功能一样,都是在编译期间推导变量类型的。不了解auto的可以转到——C11新特性之auto。 为什么引入decltype?看过上边那篇博客的读者应该知道auto在有些场景中并不适用,所以引入declt…...
二叉树相关oj题 1. 检查两颗树是否相同。
二叉树相关oj题 检查两颗树是否相同。OJ链接 另一颗树的子树。OJ链接 if(rootnull)易漏掉 会导致空指针异常翻转二叉树。OJ链接...
element tbas增加下拉框
使用Tabs 标签页的label插槽,嵌入Dropdown 下拉菜单,实现Tabs 标签页增加下拉切换功能 Tabs 标签页 tab-click"事件"(这个事件当中到拥有下拉框的tab里时,可以存一下Dropdown 第一个菜单的id,实现点击到拥有…...
新浪安卓(Android)开发面试题及参考答案(68道题,9道手撕题)
链表判环,找入口 思路: 判断是否有环:使用快慢指针,快指针每次走两步,慢指针每次走一步,如果它们相遇,说明有环。找出环入口:当判断出有环后,将慢指针重新指向头节点,然后快慢指针同时以相同速度移动,再次相遇的节点就是环的入口。以下是判断链表是否有环以及找出环…...
Zbrush导入笔刷
Zbrush笔刷目录: ...\Zbrush\ZStartup\BrushPresets...
实战演示:利用ChatGPT高效撰写论文
在当今学术界,撰写论文是一项必不可少的技能。然而,许多研究人员和学生在写作过程中常常感到困惑和压力。幸运的是,人工智能的快速发展为我们提供了新的工具,其中ChatGPT便是一个优秀的选择。本文将通过易创AI创作平台,…...
大数据学习之SCALA分布式语言三
7.集合类 111.可变set一 112.可变set二 113.不可变MAP集合一 114.不可变MAP集合二 115.不可变MAP集合三 116.可变map一 package com . itbaizhan . chapter07 //TODO 2. 使用 mutable.Map 前导入如下包 import scala . collection . mutable // 可变 Map 集合 object Ma…...
k8s简介,k8s环境搭建
目录 K8s简介环境搭建和准备工作修改主机名(所有节点)配置静态IP(所有节点)关闭防火墙和seLinux,清除iptables规则(所有节点)关闭交换分区(所有节点)修改/etc/hosts文件&…...
深入理解MySQL事务(万字详)
文章目录 什么是事务为什么会出现事务事务的版本支持事务的提交方式事务常见操作方式正常演示 - 证明事务的开始与回滚非正常演示1 - 证明未commit,客户端崩溃,MySQL自动会回滚(隔离级别设置为读未提交)非正常演示2 - 证明commit了…...
微信小程序使用picker根据接口给的省市区的数据实现省市区三级联动或者省市区街道等多级联动
接口数据如上图 省市区多级联动,都是使用的一个接口通过传参父类的code。返回我们想要的数据 比如获取省就直接不要参数。市就把省得code传给接口,区就把市的code作为参数。 <picker mode"multiSelector" :range"mulSelect1" …...
Go Fx 框架使用指南:深入理解 Provide 和 Invoke 的区别
1. 什么是 Fx 框架? Fx 是一个基于 Go 语言的依赖注入框架,专注于简化应用程序的生命周期管理和依赖的构建。在复杂的应用程序中,Fx 通过模块化的设计方式将组件连接起来,使开发者能够更高效地管理依赖关系。 Fx 的核心理念是&a…...
VSCode+Continue实现AI辅助编程
Continue是一款功能强大的AI辅助编程插件,可连接多种大模型,支持代码设计优化、错误修正、自动补全、注释编写等功能,助力开发人员提高工作效率与代码质量。以下是其安装和使用方法: 一、安装VSCode 参见: vscode安…...
阿里云服务器在Ubuntu上安装redis并使用
1、redis安装 sudo apt install lsb-release curl gpgcurl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpgecho "deb [signed-by/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.…...
Blazor-Blazor呈现概念
静态和交互式呈现概念 在Blazor开发中,Razor 组件具备两种重要的呈现方式,分别是静态呈现和交互式呈现。 静态呈现 也被称为静态渲染,是一种典型的服务器端方案。在这种模式下,组件呈现时,用户与.NET/C# 代码之间缺…...
14-6-2C++的list
(一)list对象的带参数构造 1.list(elem);//构造函数将n个elem拷贝给本身 #include <iostream> #include <list> using namespace std; int main() { list<int> lst(3,7); list<int>::iterator it; for(itlst.begi…...
StarRocks常用命令
目录 1、StarRocks 集群管理&配置命令 2、StarRocks 常用操作命令 3、StarRocks 数据导入和导出 1、StarRocks 集群管理&配置命令 查询 FE 节点信息 SHOW frontends; SHOW PROC /frontends; mysql -h192.168.1.250 -P9030 -uroot -p -e "SHOW PROC /dbs;"…...
激光雷达和相机早期融合
通过外参和内参的标定将激光雷达的点云投影到图像上。 • 传感器标定 首先需要对激光雷达和相机(用于获取 2D 图像)进行外参和内参标定。这是为了确定激光雷达坐标系和相机坐标系之间的转换关系,包括旋转和平移。通常采用棋盘格等标定工具&…...
PMP–一、二、三模–分类–12.采购管理
文章目录 技巧十二、采购管理 一模12.采购管理--3.控制采购--输出--风险登记册--每个被选中的卖方都会带来特殊的风险。随着早期风险的过时以及新风险的出现,在项目执行期间对风险登记册进行变更。 供应商还未开始做,是一个风险,当做风险进行…...
C++ 标准模板库 (STL, Standard Template Library)
声明:大佬们~这是Tubishu在追寻stl过程中偶然得到了“颢天”大佬的笔记,shushu感觉非常有帮助🔥又颢天佬未曾来过CSDN,索性在此传达颢天大佬的功德🧎 传送门在此➡️颢天笔记✨✨ C 标准模板库 (STL, Standard Templa…...
万物识别在智能体(Skills Agent)中的集成应用
万物识别在智能体(Skills Agent)中的集成应用 想象一下,你正在开发一个智能客服机器人,用户发来一张照片,里面是自家厨房水槽下漏水的一堆零件。用户问:“这是什么东西坏了?我该买什么配件?” 传统的文本对…...
祝贺电影《得闲谨制》荣获2026亚洲艺术电影节 六项提名
电影《得闲谨制》荣获2026亚洲艺术电影节「金海燕奖」主竞赛单元六项提名: 祝贺导演孔笙 提名最佳导演; 祝贺编剧伍千万里四十八 提名最佳编剧; 祝贺演员肖战 提名最佳男主角; 祝贺演员尹正 提名最佳男配角; 祝贺美术指…...
永磁同步电机这玩意儿现在工业上用得是真多,今天咱们来点硬核的,手搓个IPMSM的数学模型。先别急着关页面,代码实现和调试坑点都给你备好了
IPMSM数学模型,模拟电机对不同输入的响应,包含速度环和电流环,输出电流转速和转矩。先甩几个核心方程镇楼。d-q轴电压方程: def voltage_equation(t, state, Vd, Vq):id, iq, w_r, theta stateVd ... # 这里放你的控制算法输出V…...
SimpleMem:基于语义无损压缩的三阶段 Agent 终身记忆框架
📌 一句话总结: 本工作提出 SimpleMem,一个基于语义结构化压缩的终身记忆系统,通过“压缩—合成—规划”三阶段机制,在固定上下文预算下显著提升 LLM Agent 的长期交互能力与检索效率。 🔍 背景问题&…...
Ubuntu系统通过命令行与GUI配置以太网固定IPv4地址全指南
1. 为什么需要固定IP地址? 在日常使用Ubuntu系统时,大多数情况下我们都会选择自动获取IP地址(DHCP)。这种方式简单方便,特别适合家庭网络环境。但如果你正在搭建服务器、进行网络调试,或者需要远程访问这台…...
Nginx 安装部署
Yum在线安装部署 Nginx- 记录常用服务的版本:1.22.1- 选用稳定版本,上一个稳定版本1)配置 yum 源[rootweb01 ~]# vim /etc/yum.repos.d/nginx.repo[nginx-stable]namenginx stable repobaseurlhttp://nginx.org/packages/centos/$releasever/…...
猫抓插件:突破网页资源限制的媒体捕获解决方案
猫抓插件:突破网页资源限制的媒体捕获解决方案 【免费下载链接】cat-catch 猫抓 chrome资源嗅探扩展 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 在数字内容爆炸的时代,我们每天浏览的网页中蕴含着丰富的视频、音频和图片资源。…...
Adafruit MAX44009库详解:超低功耗环境光传感器驱动与工程实践
1. 项目概述Adafruit MAX44009 库是专为 Analog Devices(原 Maxim Integrated)推出的 MAX44009 环境光传感器设计的 Arduino 兼容驱动库。该库封装了 IC 通信、寄存器配置、自动量程切换、中断管理及光照度(lux)换算等底层逻辑&am…...
智能CPU性能优化工具:释放处理器潜能的系统级解决方案
智能CPU性能优化工具:释放处理器潜能的系统级解决方案 【免费下载链接】CPUDoc 项目地址: https://gitcode.com/gh_mirrors/cp/CPUDoc 当你在游戏中遭遇帧率骤降、视频渲染耗时过长,或是多任务处理时系统响应迟滞,这些问题的根源往往…...
Tendis与Redis Cluster对比分析:性能、成本与适用场景深度评测
Tendis与Redis Cluster对比分析:性能、成本与适用场景深度评测 【免费下载链接】Tendis Tendis is a high-performance distributed storage system fully compatible with the Redis protocol. 项目地址: https://gitcode.com/gh_mirrors/te/Tendis 在当今…...
