#优质博文 #前端 #react #状态管理

一种适用于 Zustand 和 React Query 的前端数据管理方式

AI 摘要：文章介绍了在前端数据管理中结合使用 Zustand 和 React Query 的方法。传统的 React Query 在处理复杂数据和乐观更新时存在效率低和错误率高的问题。通过使用 Zustand 代替 React Query 来托管数据，并建立数据映射表，可以简化数据更新逻辑和提高维护性。具体实现包括利用 Zustand 管理状态，通过 hooks 获取数据，以及在 store 的 fetch 方法中同步远程服务器数据。该方法在一个 RSS 信息流浏览器 Follow 中得到了应用。

innei.in

一种适用于 Zustand 和 React Query 的前端数据管理方式

在上面这篇文章中提到当 React Query 托管的数据过于复杂或者冗余的话，后续在前端做数据的乐观更新会变得非常复杂并且不可控。 [!NOTE] 乐观更新指，前端在进行数据操作时，通过 API 方式向服务器提交数据，之后数据在 UI 上的更新由前端提供，不需要等待服务器的响应。这样的方式对用户

#优质博文 #前端 #react #compiler

I tried React Compiler today, and guess what... 😉

AI 摘要：作者在尝试了 React Compiler 后，总结其在减少重新渲染方面的效果。尽管简单示例中表现良好，实际应用中效果并不理想。作者在三个不同规模的应用中测试，发现 React Compiler 仅在少数情况下能减少重新渲染，远低于预期。最终，作者认为 React Compiler 虽然有潜力，但在当前版本中仍存在诸多局限，尤其在处理复杂项目时需要手动优化。

Developerway

I tried React Compiler today, and guess what... 😉

Investigating whether we can forget about memoization in React, now that the React Compiler is open-sourced.

#碎碎念
https://x.com/rxliuli/status/1799668996201144352

前几天刚有人因为浏览器扩展盗取 cookie 损失 100w 刀，结果就有人写了 cookie 管理的扩展，还自荐进了阮一峰的周刊，你猜他想做什么？🤣

你猜猜它还要什么权限？向你访问的所有网页注入脚本的权限。这样的话，只需要一次恶意更新，你使用浏览器访问的所有网站的 cookie 都会泄露，甚至，还可以记录你的帐号密码🥲

看现在的浏览器的插件推荐真的得长点心♥️

#优质博文 #前端 #tailwind #css #最佳实践

研究三天，我找到了 tailwindcss 的正确打开姿势

【这个基本上就是我们现在团队的tailwind 使用方案，确实是很舒服的一套实践~】

AI 摘要：
1. 痛点再审视：冗长的 class 名可通过提取变量来简化，减少代码重复。
2. 无 CSS 方向：虽可用 @apply 聚合样式，但正式项目中不推荐，以避免失去体积优势。
3. 封装思维转变：借鉴 Unocss，将组件属性设计为布尔值，简化传参。

<Button primary sm>Primary SM</Button>

4. 实用工具：
- clsx 合并 class 名。
- twMerge 处理优先级问题。
- cva 管理多值属性。（补充：也可 tailwind-variants，是cva的套件）

const cls = twMerge(clsx('base', {'bg-blue-500': primary, 'bg-red-500': danger}));

5. 智能提示配置：配置编辑器正则表达式，使智能提示在变量和函数中生效。

6. 总结：TailwindCSS 提升开发效率，特别适合快速编写响应式页面。

via 微信公众号 这波能反杀

#碎碎念 #猫
不知道为什么最近每天的开心要溢出屏幕咧，分大伙点🥰🥰🥰🥰

可能是一是因为快要回家了，回家就能见到弟弟妹妹麻麻了嘿嘿嘿嘿。二是养猫太治愈啦，附赠小腊八美照*2

#优质博文 #阮一峰的科技周刊 #前端 #资源推荐 #tools

科技爱好者周刊（第 302 期）：创业虽然好，不敢推荐了

1. <span>元素可以干什么（英文） 📓 <span>是一个表示行内文本的 HTML 网页元素，本文收集了许多案例，你可以用它做各种各样的事情。 #css
2. 如何在 JavaScript 中快速读取文件（英文） 📓 作者列出了 JavaScript 读取文件的5种方法，并且比较了它们的性能差异。 #javascript
3. Sink 🧰 一个基于 Cloudflare 的短链接应用，带有访问统计。（@ccbikai 投稿） #短链接 #自部署
4. PicImpact 🧰 一个 Web 相册程序，基于 Next.js。（@besscroft 投稿） #nextjs
5. Gallery-Portfolio 🧰 一个开源的"瀑布流"照片展示程序，后端可以放在免费的 Cloudflare R2（或其他兼容 AWS S3 的存储），参见 Demo。（@linyuxuanlin 投稿）
6. widget-qrcode 🧰 一个网页二维码的 web component 组件，支持自定义二维码风格模板、前景、背景、logo等。（@mumuy 投稿）
7. cobalt 🧰 一个开源的视频下载网址，支持多个视频网站，包括 B 站、Youtube、instagram 和 Twitter。

【这期的 gallery 相关工具推荐还挺多的】

GitHub

【开源自荐】Sink - 基于 Cloudflare 带访问统计的短链系统 · Issue #4529 · ruanyf/weekly

特性 链接缩短 访问统计 Serverless 部署 自定义 Slug 🪄 AI 生成 Slug 链接有效期 演示 Sink.Cool Site Token: SinkCool 全站分析 链接管理 单个链接分析 开源 https://github.com/ccbikai/sink