#优质博文 #前端 #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 掘金@佛系社长

juejin.cn

「好文翻译」React 中的 Refs，从操作 DOM 到指令式 API - 掘金

ref 和 指令式 API 是 react 中较少接触的知识点。本文详细介绍了它们的原理，并指导你在什么场合下恰当地使用它们

#优质博文 #前端 #react #性能优化
为什么你可以删除 90% 的 useMemo 和 useCallback

很好的译文，探讨了 React 中 useMemo 和 useCallback 钩子函数的使用及其误用。作者指出，大多数情况下，开发者无需频繁使用这些钩子。useMemo 和 useCallback 的主要作用是在组件重渲染时缓存数据，以避免重复计算或生成非原始数据类型（如对象或函数）。然而，实践中它们常被滥用，如用于缓存简单的对象创建或数组操作​​​​。

文章进一步说明，许多开发者错误地认为，如果 props 没有变化（例如被缓存），组件就一定不会重渲染。然而，如果组件的父组件重渲染，子组件也会随之重渲染，这是 React 的基本工作方式​​。此外，作者指出，useMemo 和 useCallback 在初次渲染时会增加开销，尽管这种开销看似微小，但在初始渲染过程中累加起来可能会导致明显的性能问题​​。

总的来说，文章建议开发者在使用 useMemo 和 useCallback 时应更加审慎，只在确实需要避免重渲染或昂贵计算的特定场景中使用它们，以提高代码的效率和可读性​

via 掘金@佛系社长

juejin.cn

「好文翻译」为什么你可以删除 90% 的 useMemo 和 useCallback ？ - 掘金

原作博客可以说是我全网所见的关于 React 性能优化最好的博客。这篇文章告诉我们，两个被广泛使用的 hooks 是如何被滥用的，而我们为什么应该将大部分与它们相关的代码删掉

#后端 #优质博文 #权限管理 #系统设计 #CAS
如何设计一个权限管理系统

摘要: 这篇文章深入探讨了权限管理系统的设计。文章首先强调了身份认证和权限管理在系统安全中的重要性。详细讲述了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

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

#前端 #css #设计 #demo #webGL
好酷好喜欢（）
https://twitter.com/rogie/status/1721907720180388167

#优质博文 #前端
古茗打印机技术的演进
论奶茶店的前端都在干什么（大震撼）

Weixin Official Accounts Platform

古茗打印机技术的演进

一句话概括一下热敏打印机：通过温度控制打印内容。不要在碰到一些小票打印出来模糊的时候说没墨了，他根

#阮一峰的科技周刊 #前端 #优质博文
科技爱好者周刊（第 277 期）：工作台副屏的最佳选择

#资源推荐 #tools
1. KDesign 🧰 金蝶的企业级产品设计系统，包括设计规范、设计资源、前端组件库。 #组件库
2. ChatGPT Next Web 🧰 一个开源的 ChatGPT 中文网页版，做得非常精致，可以自己部署。这里是 Demo。【这个老早就在用了】#AI #chatgpt
3. Caravaggio 🧰 一个图像处理服务器，可以根据 URL 参数将原图转换成不同大小、格式等，适合用作图像 CDN 的源服务器。
4. TIL（今天我学到的） 📓 一个开源笔记库。大家可以学习他做笔记的方式，内容按主题分类，放在 GitHub 上面。

kingdee.design

KDesign

企业级产品设计系统

bot 初始化完成

后端 "pub_index"（session: "alice"）总消息数: 404

总计 1 个对话被加入了索引：
- cosine - 前端人の日常频道 (1338193436) 共 404 条消息

#草
4 0 4

#优质博文 #前端 #tailwind #css
原文：Speeding up the JavaScript ecosystem - Tailwind CSS
作者：Marvin Hagemeister
译者：Deepl
校对：云谦

译：加速 JavaScript 生态系统 - Tailwind CSS

Weixin Official Accounts Platform

译：加速 JavaScript 生态系统 - Tailwind CSS