mcpField
R
react-patterns

react-patterns

github.com/casper-studios开发15248 次安装5 天前更新
代码仓库

关于 react-patterns

react-patterns 是面向开发者的 React 参考技能，涵盖组件设计、状态管理和优化，并提供状态、记忆化与条件逻辑的专题指引。

主要功能

  1. 01派生值与局部状态
  2. 02复杂状态管理模式
  3. 03针对 O(n) 操作的记忆化
  4. 04使用 Loader/Inner 收窄类型
  5. 05显式条件渲染

适用场景

  1. 01选择组件状态边界
  2. 02管理复杂的 React 状态
  3. 03优化开销较大的计算
  4. 04编写条件渲染逻辑

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/casper-studios/casper-marketplace --skill react-patterns

安装后在 Claude Code 中输入/react-patterns确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
conditional-logic.md
memoization.md
state-management.md

详细介绍

React 模式

用于组件设计、状态管理和优化的核心 React 模式。

状态理念

避免使用状态变量。优先使用派生值和 props。将状态限定在需要它的最小子树中。复杂状态使用判别联合类型。

参见 state-management.md，了解：

  • 优先使用派生值，而非状态
  • 通过组件边界限定状态作用域
  • Context API 模式
  • 使用 Zustand 管理复杂状态
  • 使用状态机，而非多个 useState

记忆化

任何 O(n) 操作都必须记忆化。使用原子化记忆化，尽量缩小依赖数组。使用 Loader/Inner 模式，在调用 useMemo 前缩窄类型。

参见 memoization.md，了解：

  • 何时使用 useMemo
  • 原子化记忆化
  • 使用 useCallback 处理事件处理器
  • 使用 Loader/Inner 模式缩窄类型

条件逻辑

使用肯定逻辑和显式条件判断，并优先使用三元表达式而非 &&。守卫条件使用提前返回。

参见 conditional-logic.md，了解：

  • 肯定逻辑
  • 显式条件判断
  • 条件渲染
  • 使用条件判断缩窄类型
  • 提前返回

评论

支持 Markdown