前端阅读 69552021年12月24日 11:25React 内置 Hook 之 useRef 深度解析与使用案例ReactHooks已经成为了现代React开发中不可或缺的一部分，今天我们来深入研究一个特别有用的Hook——useRef。在这篇文章中，我们将引导你了解useRef的运用，并通过一些实例穿插其中，让你对这个Hook有更深入的理解。什么是useRefuseRef 是React的一个内置Hook，它可以返回一个可改变的ref对象，非常适合用于管理不会触发组件渲染的变量。用官方的话来说，一React
前端阅读 61422021年12月24日 11:17React 内置 Hook 之 useReducer 优雅管理状态在开发React应用程序时，状态管理一直是一个需我们重点关注的主题。而在React16.8的版本中，新引入的HooksAPI使得我们可以更加方便的在函数式组件中使用状态和其他React特性而无需写class。本文就详细的为你介绍一个非常强大的Hook：useReducer，它为复杂状态的管理提供了出色的解决方案。什么是useReduceruseReducer就如同它的名字暗示的那样，它是一个允许你React
前端阅读 54212024年5月10日 17:56Recoil 如何优雅高效地重置和恢复某个状态Recoil是一个为React提供状态管理的库，它通过原子（Atoms）和选择器（Selectors）的概念让状态管理变得更加直观和模块化。在某些情况下，我们可能需要将Recoil的状态（atom或selector）重置为其初始值。我们将探索如何使用Recoil优雅高效地重置和恢复状态。基础概念在深入了解重置和恢复状态之前，让我们快速回顾一下Recoil的几个基本概念：Atom:Atom是Rec ReactRecoil
前端阅读 59572024年4月21日 19:33React 使用 Recoil 和 LocalStorage 实现状态持久化实现Recoil状态与LocalStorage的无缝集成，而不在业务组件中直接操作，我们可以使用Recoil的高阶工具——effect。Effect允许我们在atom的配置中直接定义与外部资源的交互，从而将持久化逻辑与业务组件解耦。下面是如何创建自动同步到LocalStorage的Recoilatom的步骤。实现步骤一、创建Recoil状态(atom)并添加effect首先，我们创建一个RecokReactRecoil
前端阅读 6276月7日 12:23Agent Skills 教程 02：remotion-best-practices 视频生成实践介绍 remotion-best-practices Skill 的功能、安装方式、使用方法、Remotion 视频工程实践、常见误区和与其他 Skill 的配合方式。设计模式前端AI Agent
前端阅读 84242023年5月19日 22:44如何封装React无限滚动加载列表组件【含源码】前言由于需要考虑后端接口的性能问题，我们在请求业务数据列表的时候并不能直接请求全量数据。所以我们在请求数据时常见的方式是做分页查询。对于前端交互而言，我们需要考虑如何优雅的让用户触发请求下一页数据的接口。常用的方法有两种：1.提供显示的分页器，让用户自己手动点击下一页；2.业务滚动到某个阈值时自动触发下一页请求。对于移动端，滚动加载的交互是更加优雅的处理方式。对于滚动加载的能力，我们需要一个公共的React前端
前端阅读 8426月7日 00:25Agent Skills 教程 01：frontend-design 前端设计技能介绍 frontend-design Skill 的适用场景、核心能力、推荐工作流、提示词示例和落地注意事项，帮助开发者用 AI Agent 生成更接近产品级的前端界面。设计模式前端AI Agent
前端阅读 59902023年6月21日 12:35JS如何生成随机颜色，并基于React封装随机颜色选择器组件在标签功能中，由于有「背景色」属性，每次新增标签时都为选择哪种颜色犯难。因此，我们思考如何通过JS代码生成随机颜色，提取一个通用的随机颜色生成工具，并基于React框架封装随机颜色选择器组件。实际效果原理与思路作为前端开发人员，我们知道HTML接受RGB、HEX、HSL三种格式的颜色。虽然是不同的格式，但是它们的本质都是通过数字表达出颜色。因为RGB、HEX、HSL本身都是数字，那么通过生成JavaScriptReact
前端阅读 68872023年5月28日 01:26基于React创建重叠头像组件，深入理解CSS重叠样式最近项目有个新需求，需要把用户的头像水平排列并且重叠。本来以为挺麻烦的，刚开始还想着要用JS去计算每一个头像需要位移的距离。其实这个需求只需要一行代码就能搞定。最终的效果图如下：效果图实现方案首先定义HTML代码结构importReactfrom"react";import"./index.less";constavatars=["<https://upload.jianshu.io/uCSSReact
前端阅读 6276月6日 22:32AI Agent 实战教程 14：权限、审批与 Human-in-the-loop设计 Agent 的风险分级、审批流程、操作预览与人工确认机制，让 Agent 在真实系统中安全执行。MCPAI Agent
