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…...
影刀+即刻:碎片化信息自动归类的联动玩法
影刀与即刻联动实现信息自动归类影刀RPA作为自动化工具,与即刻APP的推送功能结合,可高效管理碎片化信息。以下为具体实现方法:创建即刻机器人 在即刻APP中创建自定义机器人,设置关键词触发规则。例如设置"#工作""#…...
手把手教你搭建RAG知识库:从零到一,让你的知识库从“仓库”变“助手”!
本文详细介绍了如何搭建RAG知识库,通过四个核心组件——文档处理器、嵌入模型、向量数据库和大语言模型,实现知识的有效管理和利用。文章以作者自制的知识工场为例,阐述了从文档处理、知识拆解、向量化到存储、检索和回答的完整流程ÿ…...
高效解决E-Hentai图库下载难题:实用下载工具全攻略
高效解决E-Hentai图库下载难题:实用下载工具全攻略 【免费下载链接】E-Hentai-Downloader Download E-Hentai archive as zip file 项目地址: https://gitcode.com/gh_mirrors/eh/E-Hentai-Downloader 在数字资源管理领域,E-Hentai作为知名的漫画…...
Nginx + FFmpeg 核心配置
Nginx FFmpeg 核心配置(2 种最实用方案)我给你最简、能直接用的配置,不用你自己改半天,分两种场景:Nginx 接收 FFmpeg 推流(直播)Nginx 调用 FFmpeg 自动转码(高清 / 标清ÿ…...
【2024最新】Polars 2.0清洗效率提升417%实测报告:从default配置到生产就绪配置的7阶演进路径
第一章:Polars 2.0大规模数据清洗的性能跃迁本质Polars 2.0 的核心突破并非简单提速,而是通过内存布局重构、零拷贝计算图优化与原生并行执行引擎的深度融合,彻底重构了大规模数据清洗的底层范式。其性能跃迁的本质在于:将传统 Da…...
Python实战:利用SymPy与SciPy高效破解复杂非线性方程组
1. 为什么需要SymPy和SciPy解非线性方程组? 遇到工程计算或科研问题时,我们常需要解像这样的方程组:xy10且yz34。这种包含平方项、三角函数或指数函数的方程,传统手工计算不仅耗时还容易出错。我去年做机器人运动学分析时…...
手把手教你解决HarmonyOS项目中的hvigor版本冲突问题(含API8/9兼容方案)
HarmonyOS开发实战:彻底解决hvigor版本冲突与API兼容性问题 上周团队新来的工程师小王在调试P40设备时突然惊呼:"这报错太诡异了!明明代码没问题,为什么安装包死活装不上?"我凑近一看,控制台正显…...
foobox-cn:重塑foobar2000视听体验的智能界面解决方案
foobox-cn:重塑foobar2000视听体验的智能界面解决方案 【免费下载链接】foobox-cn DUI 配置 for foobar2000 项目地址: https://gitcode.com/GitHub_Trending/fo/foobox-cn 你是否曾因音乐播放器界面过于简陋而错失沉浸式的听觉享受?当功能性凌驾…...
Phi-3-mini-4k-instruct-gguf多场景落地:客服话术优化、会议纪要提炼、周报生成实战
Phi-3-mini-4k-instruct-gguf多场景落地:客服话术优化、会议纪要提炼、周报生成实战 1. 轻量级文本生成利器介绍 Phi-3-mini-4k-instruct-gguf是微软推出的轻量级文本生成模型,特别适合处理日常办公场景中的文本任务。这个模型体积小巧但能力出众&…...
SolidWorks卸载后注册表残留?3步彻底清理+重装避坑指南(附工具)
SolidWorks卸载后注册表残留?3步彻底清理重装避坑指南(附工具) 每次开机都被"Windows正在配置SolidWorks"的弹窗骚扰?重装软件时总提示"已存在相同版本"?这大概率是注册表残留的幽灵在作祟。作为…...
