用途:为 React 组件设计提供一套架构与编码规范,重点是用组合模式构建可复用组件,适用于设计组件库、统一团队写法或重构组件结构。
主要能力:默认采用组合优先,用 children 或具名插槽 props 处理布局,用 Context 实现复合组件(如 <Select><Select.Option /></Select>)在同一 UI 单元内隐式共享状态;仅在组合无法表达时(例如包装第三方类组件)才使用高阶组件或经典 Render Props,并指出 hooks 已覆盖多数原本由 HOC 处理的横切关注点。
React 19 相关:函数组件上 ref 是普通 prop,新代码无需 forwardRef;可用 use(promise) / use(context) 在渲染中条件读取 promise 或 context,替代 useContext 加额外 useEffect 的写法。
组件与 Props:区分受控组件(状态来自 props)与非受控组件(本地 useRef 状态),表单校验优先受控;使用显式 TS interface;用 Context API 或 Zustand 避免深层 prop drilling;布尔 props 可用简写;条件渲染优先三元而非 &&,避免渲染出 0;函数组件只用 hooks、不用类,单文件单组件且小于 250 行;仅用命名导出,PascalCase 命名。
验证要点:共享隐式状态应使用复合组件加 Context 而非 prop drilling;面向 React 19 的组件把 ref 作为普通 prop 传递;HOC 或经典 render props 仅用于组合确实无法表达的包装场景。
反模式:不用类组件;不做 prop drilling;不在嵌套中定义组件;不用索引作 key,改用稳定 ID;新 React 19 代码不用 forwardRef。
限制:资料未提供安装命令、依赖版本、平台支持、收费方式或具体使用步骤;更多组合、复合组件与 Render Props 示例见其 references/patterns.md。