用途:面向 React 组件的工程化实践,聚焦清晰稳定的组件 API,用于创建或重构可复用组件。完整单页应用架构请改用 reactjs-application-development。
主要能力与原则:组合优先于过度配置;一个组件只做一件事,变体通过组合或插槽提取;props 类型化且可预测,避免布尔 props 爆炸;状态尽量靠近使用处,仅在共享时提升;无障碍为必需项。
Props API:优先 children/插槽而非复杂 render-prop;互斥变体用可辨识联合;消费者需要 DOM 时转发 ref;受控地暴露 className/style 并对齐项目体系;记录 loading、empty、error、disabled 等状态行为。
状态与 hooks:能派生就派生,不重复真值来源;副作用封装在带清理的 hooks 中;不在展示型组件内隐藏复杂数据获取;避免用 useEffect 同步本可计算的状态。
无障碍与 UX:优先原生控件(button、input、dialog),仅在必要时用 ARIA;保证可见焦点、tab 顺序、label 与正确 aria-*;键盘支持 Enter/Space/Escape/方向键;响应式布局、触控目标、避免关键内容溢出隐藏;动画尊重 prefers-reduced-motion。
性能:仅在有大列表或昂贵渲染等证据时 memoize;传给 memo 子组件的回调与对象保持稳定;避免父组件无关状态导致大树重渲染;列表使用稳定 key,必要时虚拟化。
反模式:数十个 props 的上帝组件、全局 Context 包办一切、与深层结构耦合的脆弱 CSS、渲染中副作用、忽略错误/加载状态。
完成标准:API 类型化、最小且通过使用可文档化;键盘与屏幕阅读器可访问;在项目断点下响应式;无隐藏副作用;可通过 Testing Library 按公开行为测试。
限制:资料未提供安装命令、平台、收费或价格信息。