安装热度榜官方 Skill

vercel-composition-patterns

一套用于构建灵活、可维护 React 组件的组合模式,避免布尔属性泛滥,通过复合组件、提升状态和组合内部结构来构建可扩展的组件 API,并包含 React 19 API 变更。

分类
前端与 React
榜单排名
#164
安装量
375,795

它能做什么

中文摘要

一套用于构建灵活、可维护 React 组件的组合模式,避免布尔属性泛滥,通过复合组件、提升状态和组合内部结构来构建可扩展的组件 API,并包含 React 19 API 变更。

为什么推荐

推荐理由

适用于重构布尔属性泛滥的组件、构建可复用的组件库、设计灵活的组件 API,以及审查组件架构。这套模式能让代码库在扩展时对人和 AI 代理都更易处理。

什么时候用

适用场景

  • 重构具有许多布尔属性的组件
  • 构建可复用组件库
  • 设计灵活的组件 API
  • 审查组件架构
  • 处理复合组件或上下文提供者
  • 使用 React 19 新 API 的项目

使用前先看

主要亮点

  • 01

    避免布尔属性泛滥,使用组合来定制行为

  • 02

    使用复合组件结构和共享上下文

  • 03

    提供者成为唯一知道状态管理方式的地方

  • 04

    定义包含状态、动作和元数据的通用接口,支持依赖注入

  • 05

    将状态提升到提供者组件中,以便兄弟组件访问

  • 06

    创建显式变体组件而不是布尔模式

  • 07

    使用 children 进行组合而不是 renderX 属性

  • 08

    React 19 中不使用 forwardRef,使用 use() 代替 useContext()

原始文档

原文摘录

React Composition Patterns Composition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and