React Patterns 是一份关于现代 React 开发的技能指南，主题为“Modern Development Guide”，目标是帮助开发者掌握现代 React 开发模式，包括 React 18+ 特性、Hooks、组件组合、状态管理策略以及性能优化技术，用于构建可扩展的 Web 应用。
一、用途与适用时机 资料列出了该技能的使用场景：使用函数式组件和 Hooks 构建现代 React 应用；使用 useReducer 和 Context API 实现复杂状态管理；使用记忆化技术优化 React 应用性能；创建可复用的自定义 Hook 以共享逻辑；使用 Server Components 与 React Server Components（RSC）；管理表单、副作用和异步操作；将类组件重构为现代函数式模式；构建类型安全的 React 应用；实现高级组件组合模式；调试 React 性能问题和不必要的重渲染。
二、核心概念 React 哲学强调：函数式组件（返回 JSX 的纯函数）、Hooks（可组合的状态与副作用管理）、声明式 UI（描述 UI 应呈现的样子，由 React 处理更新）、组件组合（用简单可复用组件构建复杂 UI）、单向数据流（props 向下传递，事件向上传递）、不可变性（不直接修改 state，始终创建新对象/数组）。 组件类型包括：展示型组件（专注 UI，通过 props 接收数据）、容器型组件（处理逻辑、状态和副作用）、服务端组件（在服务端渲染，无客户端 JavaScript）、客户端组件（用 "use client" 标记的交互组件）、异步组件（可 await 数据的服务端组件）。
三、内置 Hooks 参考 状态类 Hooks：
- useState：管理简单值的局部组件状态，语法为 const [state, setState] = useState(initialValue)。最佳实践包括：新状态依赖旧状态时使用函数式更新；状态尽量保持局部；不要把派生值存入 state；昂贵计算使用函数初始化（惰性初始化）。
- useReducer：用 reducer 模式管理复杂状态逻辑，语法为 const [state, dispatch] = useReducer(reducer, initialState, init?)。资料给出任务管理器示例，包含 added、changed、deleted 三种 action。适用场景：多个相关状态值、复杂状态更新逻辑、状态转换遵循可预测模式、需要优化大量更新、希望将状态逻辑与组件分离。
- useContext：无需逐层传递 props 即可访问 context 值，语法为 const value = useContext(SomeContext)。资料给出主题 Context 示例，并演示 useReducer + useContext 组合：分别创建 TasksContext 与 TasksDispatchContext，提供 useTasks 与 useTasksDispatch 自定义 Hook。
副作用类 Hooks：
- useEffect：将组件与外部系统（API、DOM、订阅）同步，语法为 useEffect(() => { ... return () => { ... }; }, [dependencies])。资料给出数据获取示例（含 ignore 标志防止竞态条件）、订阅示例（聊天室连接与清理），以及常见模式：挂载时运行一次（空依赖数组）、每次渲染运行（无依赖数组）、特定值变化时运行、卸载时清理。
- useLayoutEffect：useEffect 的同步版本，在浏览器绘制前运行。适用场景：测量 DOM 元素、同步 DOM 变更、防止视觉闪烁。资料给出 Tooltip 测量高度的示例。
性能类 Hooks：
- useMemo：在渲染之间缓存昂贵计算，语法为 const cachedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])。适用场景：昂贵计算（过滤、排序大数组）、防止子组件不必要重渲染、稳定作为依赖传递的对象/数组引用。资料同时指出反模式：简单计算不必使用 useMemo。
- useCallback：在渲染之间记忆函数引用，语法为 const cachedFn = useCallback(() => { ... }, [dependencies])。适用场景：向记忆化子组件传递回调、函数是 useEffect 或其他 Hook 的依赖、优化昂贵事件处理器。
- React.memo：记忆化整个组件以防止不必要重渲染，语法为 const MemoizedComponent = memo(function Component(props) { ... }, arePropsEqual?)，并支持自定义比较函数。
引用类 Hooks：
- useRef：创建跨渲染持久存在的可变引用，语法为 const ref = useRef(initialValue)。资料给出 DOM 引用示例（视频播放器控制）、存储可变值示例（计时器 interval），以及“上一个值”模式 usePrevious。
过渡类 Hooks（React 18+）：
- useTransition：将状态更新标记为非紧急，保持 UI 响应，语法为 const [isPending, startTransition] = useTransition()。资料给出搜索示例：输入值使用紧急更新，搜索结果使用 startTransition 非紧急更新，并用 isPending 显示“Searching...”。
- useDeferredValue：延迟更新部分 UI，语法为 const deferredValue = useDeferredValue(value)。资料给出配合 memo 的 SlowList 示例。
服务端 Action Hooks（RSC）：
- useActionState：管理服务端 action 状态与 pending 状态，语法为 const [state, formAction, isPending] = useActionState(serverAction, initialState)。资料给出 "use client" 下的表单示例（内容在资料末尾被截断）。
四、使用方式与限制 该技能以文档形式提供 React 模式、代码示例与最佳实践，资料未提供安装命令、收费信息、平台支持或具体使用步骤，这些内容暂未提供。