该技能面向使用现代 React（19+）编写组件的场景，目标是让代码清晰、正确且易于维护。以下内容按其规范整理。
【组件结构与风格】 优先使用小而专注、职责单一的组件；优先使用具名函数组件而非箭头函数，匿名回调、内联 render props 和闭包属于例外；在适用时优先显式声明返回类型与 props 类型（TypeScript）；保持组件扁平可读，避免深层嵌套 JSX；把相关逻辑（事件处理器、派生值、辅助函数）就近分组。
【状态管理】 避免使用 useEffect()，具体指导可参考“You Might Not Need An Effect”指南；优先在渲染期间派生值，而不是用状态同步；通过 TanStack Query（@tanstack/react-query）获取数据；避免不必要的 useState() 或 useReducer()；尽可能从 props 或其他 state 派生 state；把 state 本地化到尽可能低层级的组件；除非绝对必要，不要把 props 镜像为 state；优先使用受控组件，而不是同步非受控状态。
【渲染与派生】 优先内联或通过辅助函数计算派生值；仅在已证实存在性能问题时才谨慎使用 useMemo()；避免过早优化；保持渲染逻辑确定且无副作用。
【事件处理】 避免在 JSX 中内联事件处理器，优先使用具名函数： function handleClick() { // ... }
<button onClick={handleClick} />;
而不是：
<button onClick={() => { /* ... }} />
处理器命名要清晰（handleSubmit、handleChange、handleClose）；保持处理器短小，把复杂逻辑抽取为辅助函数。
【副作用、数据与副作用逻辑】 避免用 effect 处理派生状态、数据转换以及可以放在事件处理器中的事件逻辑；若副作用不可避免，应保持最小、隔离并充分注释；优先使用框架层或外部抽象（路由、数据库）而非裸 effect。
【Props 与组合】 优先组合而非配置；避免过多的布尔型 props，优先使用表达力更强的 API；有意识地使用 children 并记录其预期结构；保持 props 命名语义化且可预测。
【性能与稳定性】 仅在需要时使用稳定引用，而非默认使用；除非绝对必要，避免不必要的记忆化（memo、useCallback）；渲染列表时保持 key 稳定且有意义。
【总体原则】 代码首先为人而写，其次为编译器；优先显式而非取巧；以可读性和长期维护为优化目标；如果某个模式感觉复杂，就重新考虑组件边界。
【适用场景与限制】 适用于编写或重构 React 组件、进行代码审查、制定组件规范等场景。该技能定位于 React 19+ 与现代最佳实践，未提供具体安装命令、收费信息、价格或可量化的效果数据。