关于zustand的一些最佳实践
看过我文章的人,应该知道 状态管理库中我比较喜欢使用 的,因为使用起来非常简单,没有啥心智负担。这篇文章给大家分享一下,我这段时间使用zustand的一些心得和个人认为的最佳实践。 在React项目里,最重要优化可能就是解决重复渲染的问题了。使用zustand的时候,如果不小心,也会导致一些没用的渲染。 举个例子: 创建一个存放主题和语言类型的store 分别创建两个组件,主题组件和语言类型组件 按照上面写法,改变theme会导致Lan...
TanStack Query异步状态管理
React Query API翻译参考 该文 ,如有翻译不妥之处,还请指点,谢谢! useQuery Options 必填 用于此查询的查询键 查询键将被哈希成稳定的哈希值。有关详细信息,请参阅 当此键更改时,查询将自动更新(只要 未设置为 ) 必填,但只有在未定义默认查询函数时才需要。 有关更多信息,请参见 查询将用于请求数据的函数 接收一个 必须返回一个 ,该 将解析数据或抛出错误。数据不能为 将其设置为 以禁用自动运行此查询 可用...
十分钟玩转Mobx(
当项目越发复杂时,我们发现仅仅是提升状态已经无法适应如此复杂的状态管理了,程序状态变得比较难同步,这意味着我们需要更好的状态管理方式,于是就引入了状态管理库,如 Redux,Mobx 等。本文以Mobx 为主,再重新回顾一下~ mobx的基本概念 1.1 介绍 简单、可扩展的状态管理工具 通过运用透明的函数式响应编程使状态管瘤变得简单和可拓展 1.2 Redux和Mobx的区别 注意:复杂的应用也不是说不能用,需要合理的理清业务逻辑关系...
地表最强扫一扫
在很久很久以前,我亲爱的同事们在对接二维码扫描业务的时候,都是使用的微信官方自带的扫一扫,比如这样 所以我扫码就一定得依赖微信,在普通的浏览器中打开就GG,并且还要绑定公众号,烦的一批。 然后我就在想,扫码不就是靠摄像头捕捉图像进行解码出内容嘛,那肯定会有原生的解决方案。 果然是有的,Web API中也提供了一个实验性的功能, 它提供了一个 方法,可以接收图片元素、图片二进制数据或者是 ,最终返回一个包含码信息的 对象。 但是呢,这个功...
用Web Worker优化大文件上传
web worker 是什么 用官方的话说: Web Worker 是一种在浏览器中运行的 JavaScript 脚本,可以在独立的线程中今执行,与主线程并行工作,提供了一种在后台执行复杂计算或处理耗时操作的方式,而不会堵塞主线程的执行。 用我自己的理解 :就是“开小灶”,众所周知,Js是一种 语言,在传统的 Js 环境中,所有代码都运行在一个主线程中,包括处理用户界面,js代码执行和网络请求。当执行耗时操作时,就会导致用户页面的卡顿和...
又get到了,JS复制图片到剪切板
by from 鑫空间 鑫生活 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 一、总要有原因的 为什么会突然想到了解如何使用JS复制图片到剪切板呢? 因为上周弄了个 ,一开始的时候,图片获取的途径只能是下载到本地。 但很多时候,我是希望这种压缩好的图片可以直接上传,不需要再从本地转一圈。 此时,如果有一个复制功能就好了。 直接点击一个按钮,压缩好的图片复制到剪切板,然后再去上传页面进行上传,多方便,...
如何使用JS检测用户是否缩放了页面
by from https://www.zhangxinxu.com/wordpress/?p=9832 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 介绍我自己知道的几个检测用户是否缩放了页面的方法,这些方法都不算完美,大家根据实际场景自行抉择该使用哪个方法。 一、resize事件 + devicePixelRatio 如果希望知道用户是否执行了缩放行为,则可以在resize事件事件中检测 的变化...
纯JS实现多个音频的拼接或者合并
by from 鑫空间 鑫生活 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 一、温故而知新 3年前有更新过 ,昨天更新了 ,今天我们再讲讲如何使用JS实现多个音频的拼接(下图1)与合并(下图2)。 拼接: 合并: 这下子,纯JS操作MP3/WAV音频资源的活儿都齐全了。 操作过程本质上大同小异。 ArrayBuffer转AudioBuffer,然后读取音频信息,对采样信息进行处理。 话不多说,来看...
React Query 快速入门
很早之前就看到 React Query 在 前端 掘金圈子里火了一把,一直想学却因为种种原因没有开始。这一阵子闲下来了一些,快速学习了一下并且在自己的小项目里上手用了一番,体验非常不错。所以在这里以 React Query 为例写一篇 TanStack Query 小小的快速上手指南。 React Query TanStack Query (FKA React Query) is often described as the missi...