SuperAPI AI 工具集

react-patterns

前端与建站

查看项目

更新于 10-15 23:41

技能介绍

用途:面向 React 组件架构设计,帮助构建灵活、可复用的组件 API。

主要能力:复合组件(结合 Context 共享状态,如 <Tabs><Tab /><Panel /></Tabs>);render props(共享逻辑下的动态渲染,如 <Mouse>{({x,y}) => ...}</Mouse>);高阶组件(处理横切关注点,如 withAuth(Component));自定义 Hooks 复用有状态逻辑(useToggle()、useDebounce());Provider 模式管理全局/共享状态(<CartProvider>...</CartProvider>);受控与非受控组件(value 与 defaultValue);prop getters 提供可访问的组件 API(getButtonProps());state reducer 允许消费者自定义状态转换。

使用方式:资料给出各模式的代码示例,涉及从 react 导入 createContext、useContext、useState、useEffect、Children、cloneElement、isValidElement 等,并通过 Tabs.List、Accordion.Item 等方式挂载子组件。复合组件示例通过 Context 与 useContext 检查缺失 Provider 时抛出错误。

适用场景:设计组件接口、实现复合组件、创建 render props、开发自定义 Hooks、处理受控/非受控输入、设计可访问组件接口。状态管理被指引参见 react-state-management。

限制:资料未提供安装命令、平台支持、收费或价格信息;高阶组件、自定义 Hooks、Provider、受控/非受控、prop getter、state reducer 的完整代码示例位于 references/hoc-hooks-provider-controlled-patterns.md,正文未展开。