呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
#优质博文 #前端 #阮一峰的科技周刊 #资源推荐 #tools
科技爱好者周刊（第 279 期）：网络社区的悲剧
1. React 服务器组件的体会（英文） 📓 React 框架最早是客户端渲染（CSR），后来增加了服务器渲染（SSR），现在又开始推广服务器组件（RSC）。作者最近迁移到服务器组件，这篇长文就是他的感想，并给出了使用建议。 #react
2. curl 支持 IPFS 协议（英文）📓 老牌工具 curl 最近开始支持抓取 IPFS 协议的网页，本文介绍一些背后的考虑，具体用法参考文档。
3. Target="_Blank" 属性的安全漏洞（中文） 📓 一篇老文章，介绍网页<a>标签的target="_blank"属性打开新窗口时，会使得新窗口可以引用原始窗口，因此可能有安全风险。 解决方法为加上
4. Easydict 🧰 一个 macOS 平台的桌面应用，能够查找单词和翻译文本，并支持划词翻译和 OCR 截图翻译，可以配置后台词典和翻译服务，代码开源。
5. 百词斩网页助手 🧰 一个浏览器扩展，支持取词翻译、收藏单词等操作，可以与背单词 App"百词斩"配合使用，建立自己的单词本。
6. Elog 🧰 该工具可以将写作平台（语雀/飞书/Notion/FlowUs）的内容，发布到博客平台（Hexo/Vitepress/Confluence/WordPress）等。
科技爱好者周刊（第 279 期）：网络社区的悲剧
1. React 服务器组件的体会（英文） 📓 React 框架最早是客户端渲染（CSR），后来增加了服务器渲染（SSR），现在又开始推广服务器组件（RSC）。作者最近迁移到服务器组件，这篇长文就是他的感想，并给出了使用建议。 #react
2. curl 支持 IPFS 协议（英文）📓 老牌工具 curl 最近开始支持抓取 IPFS 协议的网页，本文介绍一些背后的考虑，具体用法参考文档。
3. Target="_Blank" 属性的安全漏洞（中文） 📓 一篇老文章，介绍网页<a>标签的target="_blank"属性打开新窗口时，会使得新窗口可以引用原始窗口，因此可能有安全风险。 解决方法为加上
rel="noopener noreferrer" 如
<a href="https://hashnode.com/devblog" target="_blank" rel="noopener noreferrer">
Create your Devblog today
</a>4. Easydict 🧰 一个 macOS 平台的桌面应用，能够查找单词和翻译文本，并支持划词翻译和 OCR 截图翻译，可以配置后台词典和翻译服务，代码开源。
5. 百词斩网页助手 🧰 一个浏览器扩展，支持取词翻译、收藏单词等操作，可以与背单词 App"百词斩"配合使用，建立自己的单词本。
6. Elog 🧰 该工具可以将写作平台（语雀/飞书/Notion/FlowUs）的内容，发布到博客平台（Hexo/Vitepress/Confluence/WordPress）等。
#优质博文 #前端 #react
Breaking React Query's API on Purpose
今天发现React Query v5 把 useQuery 的 onSuccess等回调函数给扬了
相关RFC: RFC: remove callbacks from useQuery #5279
AI 摘要: 文章讨论了React Query v5中对useQuery回调函数的移除决定。作者指出，设计API是个挑战，因为它需要在灵活性、简洁性和直观性之间找到平衡。React Query v5决定移除useQuery的 onSuccess、onError和onSettled 回调函数，因为它们在实践中会导致不一致和错误。这些回调虽然看似直观，但在多组件使用时会产生重复的副作用。作者提出，使用全局缓存级别的回调和meta字段是更好的替代方案，可以避免状态同步和渲染周期中的数据不一致问题。此外，文章还指出，即便在特殊情况下需要状态同步，也应该谨慎使用useEffect钩子来保证数据一致性。总体上，文章强调API应该简单、直观且一致，而useQuery的现有回调方式存在潜在的问题，因此选择移除它们。
via TkDodo's blog
Breaking React Query's API on Purpose
今天发现React Query v5 把 useQuery 的 onSuccess等回调函数给扬了
相关RFC: RFC: remove callbacks from useQuery #5279
AI 摘要: 文章讨论了React Query v5中对useQuery回调函数的移除决定。作者指出，设计API是个挑战，因为它需要在灵活性、简洁性和直观性之间找到平衡。React Query v5决定移除useQuery的 onSuccess、onError和onSettled 回调函数，因为它们在实践中会导致不一致和错误。这些回调虽然看似直观，但在多组件使用时会产生重复的副作用。作者提出，使用全局缓存级别的回调和meta字段是更好的替代方案，可以避免状态同步和渲染周期中的数据不一致问题。此外，文章还指出，即便在特殊情况下需要状态同步，也应该谨慎使用useEffect钩子来保证数据一致性。总体上，文章强调API应该简单、直观且一致，而useQuery的现有回调方式存在潜在的问题，因此选择移除它们。
via TkDodo's blog
tkdodo.eu
Breaking React Query's API on purpose
Why good API design matters, even if it means breaking existing APIs in the face of resistance.
#优质博文 #前端 #react
React Reconciliation: How It Works and Why We Should Care
AI 摘要: 本文由Nadia Makarevich撰写，深入探讨了React的协调（reconciliation）算法及其对日常编码的影响，特别关注条件渲染、"key"属性以及为什么不应在其他组件内声明组件的问题。文章通过实例说明了React是如何通过虚拟DOM（Virtual DOM）管理组件的渲染，以及状态更新时如何影响DOM元素。文章还解释了在数组中使用"key"属性的重要性，它在React中充当元素的唯一标识符，用于在重新渲染时区分不同的元素，即使它们的位置在数组中发生变化。
via Developer Way
React Reconciliation: How It Works and Why We Should Care
AI 摘要: 本文由Nadia Makarevich撰写，深入探讨了React的协调（reconciliation）算法及其对日常编码的影响，特别关注条件渲染、"key"属性以及为什么不应在其他组件内声明组件的问题。文章通过实例说明了React是如何通过虚拟DOM（Virtual DOM）管理组件的渲染，以及状态更新时如何影响DOM元素。文章还解释了在数组中使用"key"属性的重要性，它在React中充当元素的唯一标识符，用于在重新渲染时区分不同的元素，即使它们的位置在数组中发生变化。
via Developer Way
Developerway
React reconciliation: how it works and why should we care
Looking in detail into how React reconciliation algorithm works. Explore in the process quirks of conditional rendering, the 'key' attribute, and why we shouldn't declare components inside other components.
#资源推荐 #AI #chatgpt #tools #爬虫
BuilderIO/gpt-crawler: 一个开源的知识库自动爬虫工具
该项目可以从指定的 URL 爬取网站内容，生成知识文件，用于创建定制的 GPT 模型（GPTs）。支持从一个或多个 URL 爬取数据，并且已经在实践中应用，例如通过爬取 Builder.io 的文档来回答有关如何使用和集成 Builder.io 的问题。
使用该工具需要遵循以下步骤：首先确保安装了 Node.js（版本 16 或更高），然后克隆仓库、安装依赖项（包括 Playwright，如果未安装），并配置爬虫。用户可以自定义配置文件
这个生成的文件可以用于创建自定义的 GPT 模型。用户可以选择通过 UI 上传该文件以创建可共享的 GPT 模型，也可以通过 API 上传以集成到产品中。对于 UI 方式，用户需要访问 OpenAI 的 ChatGPT 网站，上传文件，并通过 "My GPTs" 菜单创建和配置自定义 GPT。对于 API 方式，用户需要访问 OpenAI 的平台网站，创建新的助手，并上传文件。
BuilderIO/gpt-crawler: 一个开源的知识库自动爬虫工具
该项目可以从指定的 URL 爬取网站内容，生成知识文件，用于创建定制的 GPT 模型（GPTs）。支持从一个或多个 URL 爬取数据，并且已经在实践中应用，例如通过爬取 Builder.io 的文档来回答有关如何使用和集成 Builder.io 的问题。
使用该工具需要遵循以下步骤：首先确保安装了 Node.js（版本 16 或更高），然后克隆仓库、安装依赖项（包括 Playwright，如果未安装），并配置爬虫。用户可以自定义配置文件
config.ts`，以指定要爬取的 URL、匹配模式、选择器、最大爬取页面数等。完成配置后，运行爬虫，它将生成一个名为 `output.json 的文件。这个生成的文件可以用于创建自定义的 GPT 模型。用户可以选择通过 UI 上传该文件以创建可共享的 GPT 模型，也可以通过 API 上传以集成到产品中。对于 UI 方式，用户需要访问 OpenAI 的 ChatGPT 网站，上传文件，并通过 "My GPTs" 菜单创建和配置自定义 GPT。对于 API 方式，用户需要访问 OpenAI 的平台网站，创建新的助手，并上传文件。
GitHub
GitHub - BuilderIO/gpt-crawler: Crawl a site to generate knowledge files to create your own custom GPT from a URL
Crawl a site to generate knowledge files to create your own custom GPT from a URL - BuilderIO/gpt-crawler
#优质博文 #前端 #react
「React 进阶」React 优雅的捕获并处理渲染异常
评：这篇文章偏向于类组件，虽然我是更喜欢ErrorBoundary，但是这个mark一下吧也
AI 摘要: 这篇文章讨论了在 React 应用中如何优雅地捕获并处理渲染异常。文章首先指出，在 React 中使用 JSX 语法虽然带来了灵活性和便利，但也容易出现渲染异常，如空指针错误，导致页面白屏。为解决这一问题，文章介绍了两种主要方法：使用
1.
2. HOC（高阶组件）：为了处理大量组件的异常，文章提出了创建一个通用的高阶组件来封装可能出现渲染异常的核心组件。这种方法可以批量处理渲染异常，增强了代码的复用性。
最后，文章还探讨了渲染异常的监控方法。作者提出了一种利用 context 和插槽组件的技术方案来监控渲染异常。这种方案允许检测到哪些组件在渲染过程中出现异常，从而帮助开发者更快地定位和解决问题。
总之，这篇文章为 React 开发者提供了一套完整的解决方案来优雅地处理和监控渲染异常，旨在提高应用的稳定性和用户体验。
via 公众号 前端Sharing
「React 进阶」React 优雅的捕获并处理渲染异常
评：这篇文章偏向于类组件，虽然我是更喜欢ErrorBoundary，但是这个mark一下吧也
AI 摘要: 这篇文章讨论了在 React 应用中如何优雅地捕获并处理渲染异常。文章首先指出，在 React 中使用 JSX 语法虽然带来了灵活性和便利，但也容易出现渲染异常，如空指针错误，导致页面白屏。为解决这一问题，文章介绍了两种主要方法：使用
componentDidCatch 和高阶组件（HOC）。1.
componentDidCatch：这是 React 类组件的生命周期方法，它可以捕获子组件树中的异常。文章通过实例展示了如何用 `componentDidCatch 将潜在的渲染异常从页面层面降低到组件层面，从而避免整个页面崩溃。2. HOC（高阶组件）：为了处理大量组件的异常，文章提出了创建一个通用的高阶组件来封装可能出现渲染异常的核心组件。这种方法可以批量处理渲染异常，增强了代码的复用性。
最后，文章还探讨了渲染异常的监控方法。作者提出了一种利用 context 和插槽组件的技术方案来监控渲染异常。这种方案允许检测到哪些组件在渲染过程中出现异常，从而帮助开发者更快地定位和解决问题。
总之，这篇文章为 React 开发者提供了一套完整的解决方案来优雅地处理和监控渲染异常，旨在提高应用的稳定性和用户体验。
via 公众号 前端Sharing
#优质博文 #前端 #css #新标准
快速了解 CSS @starting-style 规则
AI 摘要: 本文介绍了Chrome 117新推出的CSS @starting-style规则。这个规则允许定义元素的初始样式，使其在页面加载时即呈现动画效果。传统上，CSS动画依赖于状态变化来触发，如使用transition和animation。transition简单但需要状态变化，如添加类名。animation可自动运行，无需状态变化。@starting-style改变了这一局限，允许在元素渲染前设定初始状态，使transition可用于初始渲染动画。
文章还提及了一个常见问题：新添加的元素难以触发transition动画，因为元素在添加类名时尚未完全渲染。解决方法包括使用定时器、强制重绘或animation替代。@starting-style同样可解决此问题。
此外，@starting-style使display:none的元素也能支持过渡效果，这在之前是难以实现的。最后，作者指出，虽然@starting-style是一个有用的新特性，但可能不会广泛使用，因为它的功能可以被其他方法替代，且其正式应用时间尚不确定。作者通过具体示例和链接提供了实际效果展示，帮助读者更好地理解@starting-style的应用场景和优势。
via 公众号 前端侦探
快速了解 CSS @starting-style 规则
AI 摘要: 本文介绍了Chrome 117新推出的CSS @starting-style规则。这个规则允许定义元素的初始样式，使其在页面加载时即呈现动画效果。传统上，CSS动画依赖于状态变化来触发，如使用transition和animation。transition简单但需要状态变化，如添加类名。animation可自动运行，无需状态变化。@starting-style改变了这一局限，允许在元素渲染前设定初始状态，使transition可用于初始渲染动画。
文章还提及了一个常见问题：新添加的元素难以触发transition动画，因为元素在添加类名时尚未完全渲染。解决方法包括使用定时器、强制重绘或animation替代。@starting-style同样可解决此问题。
此外，@starting-style使display:none的元素也能支持过渡效果，这在之前是难以实现的。最后，作者指出，虽然@starting-style是一个有用的新特性，但可能不会广泛使用，因为它的功能可以被其他方法替代，且其正式应用时间尚不确定。作者通过具体示例和链接提供了实际效果展示，帮助读者更好地理解@starting-style的应用场景和优势。
via 公众号 前端侦探
#资源推荐 #tools
via 公众号 阿虚同学 在知乎被吹上天的开源软件，同类199付费软件在它面前弱爆了！
DigiKam 是一款诞生于二十几年前的开源免费的照片管理软件：一大优势是由于采用数据库存储缩略图（据悉13 万张缩略图仅有不到 2.8G），它浏览大量图片的速度可感知到的比 Eagle 都还要快
标签、评分这些自然都是支持的，编辑图片元数据自然也不在话下，并且像 Brigde 和 Lightroom 一样，DigiKam 写入的标签数据都是写入到图片本身的，无论图片移动还是改名，后续再用 DigiKam 等软件打开就都能读取图片。
via 公众号 阿虚同学 在知乎被吹上天的开源软件，同类199付费软件在它面前弱爆了！
DigiKam 是一款诞生于二十几年前的开源免费的照片管理软件：一大优势是由于采用数据库存储缩略图（据悉13 万张缩略图仅有不到 2.8G），它浏览大量图片的速度可感知到的比 Eagle 都还要快
标签、评分这些自然都是支持的，编辑图片元数据自然也不在话下，并且像 Brigde 和 Lightroom 一样，DigiKam 写入的标签数据都是写入到图片本身的，无论图片移动还是改名，后续再用 DigiKam 等软件打开就都能读取图片。
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 278 期）：棘手的 AI 版权
1. 来自腾讯的 2D 图形库 TGFX 🧰 TGFX 的开发目的，就是要替代 Skia。 它起源于腾讯的动效解决方案 PAG。当时，腾讯内部很多项目，都有很强的动画效果需求，而且要求跨平台，所以就有了 PAG 这个专门制作动效的工具。
PAG 的核心就是图形库，最早用的是 Skia，但后来发现两个问题：首先，Skia 有历史包袱，打包体积大，性能也比较保守；其次，中国开发者看重的一些问题，开发团队往往不能（或不愿）跟进。
最终，PAG 团队下定决心，换掉 Skia，开发自己的图形库 TGFX。
2. 如何发布一个 TypeScript 软件包？（英文） 📓 TypeScript 语言写的软件包，怎么发布到 npm 上面？#工程化
3. C++ Fiber 基础知识（英文） 📓 React 引入了 Fiber，这个词到底是什么意思？它其实来自 C++，本文就介绍 C++ Fiber 的基本知识，前半部分都是通俗的讲解。#react #cpp
4. 自适应文本框的 CSS 实现（英文） 📓 用户输入文本，如何让网页输入框随着文字的增加，自动增加高度？不用 JS，只用 CSS。【省流:新特性 ｀form-sizing: normal;｀ 】#css
5. ripsecrets 🧰 这个工具用于检查代码仓库，有没有泄漏密钥。它可以配置在 CI/CD 流程里面自动运行。#ci
6. screenshot-to-code 🧰 一个开源的 Web 应用，用户上传一张网页截图，它会通过 OpenAI，给出该网页的 HTML/Tailwind/JS 代码实现。 #chatgpt
7. PageSpyWeb 🧰 一个开源的远程调试工具，提供类似浏览器控制台的界面，进行远程调试。
8. IPS 🧰 一个命令行工具， 查询和处理 IP 地理位置数据库。
9. GWS 🧰 一个开源的高性能 WebSocket 实现，包括服务器和客户端，用 Go 语言编写。#ws
10. ChatGot 🧰 在一个窗口内，同时跟多个模型互动，可以让 GPT 输出文字，然后用 @midjourney 生成图片。#chatgpt
11. 网页 AI 评审 🧰 这个 Web 工具对用户提供的网址，进行 AI 评审，给出页面的设计问题和改进建议。
它是免费的，但是用户多的时候，会停止服务。如果 AI 表现好，以后设计稿评审和代码评审都可以交给它了 #ai
12. AITDK 🧰 用户输入文章的主题，该网页工具会自动生成 SEO 友好的标题、描述、关键词和常见问题解答。#ai
13. Bubble 🧰 该仓库收集各种可以放在 GitHub Profile 和 Readme 上面的小组件。
14. Bing 图像创建器 🧰 微软官方的 AI 文生图服务。#ai
15. YesChat.ai 🧰 该网站提供最新 AI 模型（GPT4V、Dalle3、Claude 2）的免费体验，不过每天有次数限制。
科技爱好者周刊（第 278 期）：棘手的 AI 版权
1. 来自腾讯的 2D 图形库 TGFX 🧰 TGFX 的开发目的，就是要替代 Skia。 它起源于腾讯的动效解决方案 PAG。当时，腾讯内部很多项目，都有很强的动画效果需求，而且要求跨平台，所以就有了 PAG 这个专门制作动效的工具。
PAG 的核心就是图形库，最早用的是 Skia，但后来发现两个问题：首先，Skia 有历史包袱，打包体积大，性能也比较保守；其次，中国开发者看重的一些问题，开发团队往往不能（或不愿）跟进。
最终，PAG 团队下定决心，换掉 Skia，开发自己的图形库 TGFX。
2. 如何发布一个 TypeScript 软件包？（英文） 📓 TypeScript 语言写的软件包，怎么发布到 npm 上面？#工程化
3. C++ Fiber 基础知识（英文） 📓 React 引入了 Fiber，这个词到底是什么意思？它其实来自 C++，本文就介绍 C++ Fiber 的基本知识，前半部分都是通俗的讲解。#react #cpp
4. 自适应文本框的 CSS 实现（英文） 📓 用户输入文本，如何让网页输入框随着文字的增加，自动增加高度？不用 JS，只用 CSS。【省流:新特性 ｀form-sizing: normal;｀ 】#css
5. ripsecrets 🧰 这个工具用于检查代码仓库，有没有泄漏密钥。它可以配置在 CI/CD 流程里面自动运行。#ci
6. screenshot-to-code 🧰 一个开源的 Web 应用，用户上传一张网页截图，它会通过 OpenAI，给出该网页的 HTML/Tailwind/JS 代码实现。 #chatgpt
7. PageSpyWeb 🧰 一个开源的远程调试工具，提供类似浏览器控制台的界面，进行远程调试。
8. IPS 🧰 一个命令行工具， 查询和处理 IP 地理位置数据库。
9. GWS 🧰 一个开源的高性能 WebSocket 实现，包括服务器和客户端，用 Go 语言编写。#ws
10. ChatGot 🧰 在一个窗口内，同时跟多个模型互动，可以让 GPT 输出文字，然后用 @midjourney 生成图片。#chatgpt
11. 网页 AI 评审 🧰 这个 Web 工具对用户提供的网址，进行 AI 评审，给出页面的设计问题和改进建议。
它是免费的，但是用户多的时候，会停止服务。如果 AI 表现好，以后设计稿评审和代码评审都可以交给它了 #ai
12. AITDK 🧰 用户输入文章的主题，该网页工具会自动生成 SEO 友好的标题、描述、关键词和常见问题解答。#ai
13. Bubble 🧰 该仓库收集各种可以放在 GitHub Profile 和 Readme 上面的小组件。
14. Bing 图像创建器 🧰 微软官方的 AI 文生图服务。#ai
15. YesChat.ai 🧰 该网站提供最新 AI 模型（GPT4V、Dalle3、Claude 2）的免费体验，不过每天有次数限制。
GitHub
GitHub - Tencent/tgfx: A lightweight 2D graphics library for rendering texts, geometries, and images with high-performance APIs…
A lightweight 2D graphics library for rendering texts, geometries, and images with high-performance APIs that work across various platforms. - Tencent/tgfx
#优质博文 #前端 #react
- React 中的 Refs，从操作 DOM 到指令式 API
- 原文：Refs in React: from access to DOM to imperative API
很好的译文x2。这篇文章探讨了在 React 中使用 Refs 的重要性，尤其是在需要直接操作DOM的少数情况下。文章详细介绍了 React 中 Refs 的使用方法和场景。
Refs 在 React 中用于访问实际的 DOM 元素，是一个可变对象，React 会保留其在重新渲染时的引用。文章通过几个实例演示了如何使用 useRef 访问 DOM，例如在 React 中处理表单输入焦点或滚动到特定元素。同时，文章探讨了如何将 ref 作为 prop 从父组件传递给子组件，以便在多个表单中重用输入组件。此外，也介绍了 forwardRef 的使用，它允许将 ref 从父组件传递给函数组件。
文章还探讨了使用 useImperativeHandle 实现指令式 API 的方法，这对于实现例如输入字段动画效果等功能特别有用。最后，还提到了一种不使用 useImperativeHandle 而直接操作 ref 的方法，这为 React 开发提供了更多的灵活性。
顺藤摸瓜看看原作者其他文章：Developer Way
via 掘金@佛系社长
- React 中的 Refs，从操作 DOM 到指令式 API
- 原文：Refs in React: from access to DOM to imperative API
很好的译文x2。这篇文章探讨了在 React 中使用 Refs 的重要性，尤其是在需要直接操作DOM的少数情况下。文章详细介绍了 React 中 Refs 的使用方法和场景。
Refs 在 React 中用于访问实际的 DOM 元素，是一个可变对象，React 会保留其在重新渲染时的引用。文章通过几个实例演示了如何使用 useRef 访问 DOM，例如在 React 中处理表单输入焦点或滚动到特定元素。同时，文章探讨了如何将 ref 作为 prop 从父组件传递给子组件，以便在多个表单中重用输入组件。此外，也介绍了 forwardRef 的使用，它允许将 ref 从父组件传递给函数组件。
文章还探讨了使用 useImperativeHandle 实现指令式 API 的方法，这对于实现例如输入字段动画效果等功能特别有用。最后，还提到了一种不使用 useImperativeHandle 而直接操作 ref 的方法，这为 React 开发提供了更多的灵活性。
顺藤摸瓜看看原作者其他文章：Developer Way
via 掘金@佛系社长
#优质博文 #前端 #react #性能优化
为什么你可以删除 90% 的 useMemo 和 useCallback
很好的译文，探讨了 React 中 useMemo 和 useCallback 钩子函数的使用及其误用。作者指出，大多数情况下，开发者无需频繁使用这些钩子。useMemo 和 useCallback 的主要作用是在组件重渲染时缓存数据，以避免重复计算或生成非原始数据类型（如对象或函数）。然而，实践中它们常被滥用，如用于缓存简单的对象创建或数组操作。
文章进一步说明，许多开发者错误地认为，如果 props 没有变化（例如被缓存），组件就一定不会重渲染。然而，如果组件的父组件重渲染，子组件也会随之重渲染，这是 React 的基本工作方式。此外，作者指出，useMemo 和 useCallback 在初次渲染时会增加开销，尽管这种开销看似微小，但在初始渲染过程中累加起来可能会导致明显的性能问题。
总的来说，文章建议开发者在使用 useMemo 和 useCallback 时应更加审慎，只在确实需要避免重渲染或昂贵计算的特定场景中使用它们，以提高代码的效率和可读性
via 掘金@佛系社长
为什么你可以删除 90% 的 useMemo 和 useCallback
很好的译文，探讨了 React 中 useMemo 和 useCallback 钩子函数的使用及其误用。作者指出，大多数情况下，开发者无需频繁使用这些钩子。useMemo 和 useCallback 的主要作用是在组件重渲染时缓存数据，以避免重复计算或生成非原始数据类型（如对象或函数）。然而，实践中它们常被滥用，如用于缓存简单的对象创建或数组操作。
文章进一步说明，许多开发者错误地认为，如果 props 没有变化（例如被缓存），组件就一定不会重渲染。然而，如果组件的父组件重渲染，子组件也会随之重渲染，这是 React 的基本工作方式。此外，作者指出，useMemo 和 useCallback 在初次渲染时会增加开销，尽管这种开销看似微小，但在初始渲染过程中累加起来可能会导致明显的性能问题。
总的来说，文章建议开发者在使用 useMemo 和 useCallback 时应更加审慎，只在确实需要避免重渲染或昂贵计算的特定场景中使用它们，以提高代码的效率和可读性
via 掘金@佛系社长
#后端 #优质博文 #权限管理 #系统设计 #CAS
如何设计一个权限管理系统
摘要: 这篇文章深入探讨了权限管理系统的设计。文章首先强调了身份认证和权限管理在系统安全中的重要性。详细讲述了CAS（Central Authentication Service）身份认证系统的工作原理，包括票据类型（如TGT、ST）和主要服务（如KDC、AS、TGS）。接着，文章探讨了基于角色的权限管理模型（RBAC），介绍了RBAC的几种模型，如基本模型、引入用户组的模型和角色分级模型。文章还提供了数据库表的设计建议，并讨论了如何使用Shiro框架实施身份认证和权限管理，包括权限体策略和权限校验的过程。
via 知乎专栏
如何设计一个权限管理系统
摘要: 这篇文章深入探讨了权限管理系统的设计。文章首先强调了身份认证和权限管理在系统安全中的重要性。详细讲述了CAS（Central Authentication Service）身份认证系统的工作原理，包括票据类型（如TGT、ST）和主要服务（如KDC、AS、TGS）。接着，文章探讨了基于角色的权限管理模型（RBAC），介绍了RBAC的几种模型，如基本模型、引入用户组的模型和角色分级模型。文章还提供了数据库表的设计建议，并讨论了如何使用Shiro框架实施身份认证和权限管理，包括权限体策略和权限校验的过程。
via 知乎专栏
#优质博文 #前端 #react
为什么我更推荐命令式 Modal
AI摘要：Modal 模态对话框在中台业务中非常常见。声明式 Modal 是一种常见的定义方式，可以通过组件库内置的组件来实现。在声明式 Modal 中，需要手动控制 Modal 的打开状态，并将状态和 UI 绑定在一起。随着业务的增加，页面上可能会出现多个 Modal 和 Button，导致代码变得冗长且难以维护。为了解决这个问题，可以将 Modal 抽离到外部组件中，但这样会导致父组件的状态堆积。另一种解决方案是将 Modal 和 Button 直接耦合在一起，但这样无法单独复用 Modal。为了解耦 Modal，需要编写大量代码并且状态变得混乱。后续可能还会遇到无法在父组件中直接控制 Modal 的问题，可以通过将状态下沉到外部 Store 或者 Context 中来解决。
via 静かな森 - innei.in
为什么我更推荐命令式 Modal
AI摘要：Modal 模态对话框在中台业务中非常常见。声明式 Modal 是一种常见的定义方式，可以通过组件库内置的组件来实现。在声明式 Modal 中，需要手动控制 Modal 的打开状态，并将状态和 UI 绑定在一起。随着业务的增加，页面上可能会出现多个 Modal 和 Button，导致代码变得冗长且难以维护。为了解决这个问题，可以将 Modal 抽离到外部组件中，但这样会导致父组件的状态堆积。另一种解决方案是将 Modal 和 Button 直接耦合在一起，但这样无法单独复用 Modal。为了解耦 Modal，需要编写大量代码并且状态变得混乱。后续可能还会遇到无法在父组件中直接控制 Modal 的问题，可以通过将状态下沉到外部 Store 或者 Context 中来解决。
via 静かな森 - innei.in
innei.in
为什么我更推荐命令式 Modal
Modal 模态对话框。 在中台业务中非常常见。 什么是声明式 Modal 组件库中一般都会内置这类组件，最为参见的声明式 Modal 定义。 例如 Antd 5 中的声明式 Modal 是这样定义的。 const App: React.FC = () => { const [isMo
https://twitter.com/nicks_twt/status/1723994531341779053
daily inspiration — app search 🔎✨
via Twitter @nicks_twt
