$ loading_
帮助你编写或审查符合 React 18/19 最佳实践的组件与架构。
复制安装指令，让 AI 自动完成配置 · 推荐新手
请帮我安装 askskill 上的 "react-patterns" 技能： 1. 下载 https://raw.githubusercontent.com/affaan-m/ECC/main/skills/react-patterns/SKILL.md 2. 保存为 ~/.claude/skills/react-patterns/SKILL.md 3. 装好后重载技能，告诉我可以用了
请审查下面这个 React 组件方案，重点检查 hooks 使用纪律、Server/Client Component 边界、Suspense 与 Error Boundary 的放置是否合理，并给出重构建议与示例代码： [粘贴组件代码或设计方案]
一份结构化审查意见，指出边界问题、潜在风险以及改进后的组件组织方式与代码示例。
我正在做一个 React 19 应用，包含表单提交、服务端数据获取、局部 UI 状态和跨页面共享状态。请根据场景给出状态管理决策树，说明何时用 useState、useReducer、context、URL 状态、服务端数据缓存或外部状态库。
一份按场景分类的状态管理决策建议，包含选择标准、取舍分析和推荐方案。
请为这个 React 表单重写实现方案，要求优先考虑可访问性，使用现代表单 actions 模式，处理提交中、成功、失败三种状态，并说明如何让键盘与屏幕阅读器体验更好： [粘贴表单代码]
一个改进后的表单实现方案，包含可访问交互说明、状态处理逻辑和示例代码。
Idiomatic React 18/19 patterns for building robust, accessible, performant component trees.
forwardRef/useEffect-heavy code// Good: derive during render
function Cart({ items }: { items: CartItem[] }) {
const total = items.reduce((sum, i) => sum + i.price * i.qty, 0);
return <span>{formatMoney(total)}</span>;
}
// Bad: derived state stored separately
function Cart({ items }: { items: CartItem[] }) {
const [total, setTotal] = useState(0);
useEffect(() => {
setTotal(items.reduce((sum, i) => sum + i.price * i.qty, 0));
}, [items]);
return <span>{formatMoney(total)}</span>;
}
Derived state in useEffect adds a render cycle, can desync, and obscures the data flow.
Effects, mutations, network calls, and subscriptions live in event handlers or useEffect — never in the render body.
React has no inheritance model for components. Compose with children, render props, or component props.
See rules/react/hooks.md for the full ruleset. Highlights:
setX(prev => prev + 1)) when new state depends on olduseMemo/useCallback only when a profiler or a dependency chain proves it mattersUsed by one component?
-> useState inside it
Used by parent + a few descendants?
-> lift to nearest common ancestor
Used across distant branches AND low-frequency reads (theme, auth, locale)?
-> React Context
High-frequency updates shared across the tree?
-> external store (Zustand, Jotai, Redux Toolkit)
Derived from a server?
-> server-state library (TanStack Query, SWR, RSC fetch)
Most pages do not need context or a global store. Resist abstraction until duplicated lifting becomes painful.
// Server Component - default, async, never ships JS for itself
export default async function ProductPage({ params }: { params: { id: string } }) {
const product = await db.product.findUnique({ where: { id: params.id } });
if (!product) notFound();
return <ProductView product={product} />;
}
// Client Component - opt in with "use client"
"use client";
export function AddToCartButton({ productId }: { productId: string }) {
const [pending, startTransition] = useTransition();
return (
<button
disabled={pending}
onClick={() => startTransition(() => addToCart(productId))}
>
{pending ? "Adding..." : "Add to cart"}
</button>
);
}
Boundaries:
children<form action={...}> or imperatively from event handlersimport a Server Component from a Client Component file — compose them via children instead<ErrorBoundary fallback={<ErrorView />}>
<Suspense fallback={<UserSkeleton />}>
<UserDetail id={id} />
</Suspense>
</ErrorBoundary>
…
通过双评审智能体对结果进行对抗式校验，提升输出发布前的可靠性
帮助你为 React 组件、Hook 与页面编写、修复并优化测试方案。