React 5 种组件提取思路与实践

在开发时，经常遇到一些高度重复但略有差异的 UI 模式，此时我们当然会把组件提取出去，但是组件提取的方式有很多，怎么根据不同场景选取合适的方式呢？尤其时在复杂的业务场景中，组件提取的思路影响着着代码的可维护性、可读性以及扩展性。本文将以一个[详情]组件为例，探讨 5 种不同的 React 组件提取思路，分析它们的适用场景与实现技巧。

一、直接实现

// 全部写在一个组件中
const ProductDetail = ({ productItem }) => (<div className="prose"><section><h2>小标题1</h2><p>{productItem.content}</p></section>{/* 重复类似结构 */}</div>
);

问题分析：

• 重复代码量随区块增加线性增长
• 修改样式需要全局搜索替换
• 难以应对需求变化（如新增内容区块）

这种实现方式虽然简单，但当内容结构复杂或者频繁变化时，会导致代码的重复度过高，难以维护。

二、进化之路：5 种组件提取模式

模式 1：配置驱动式（Config-Driven）

又名数据驱动模式、JSON Schema 模式

核心思想 ​​：将 UI 结构抽象为数据配置，实现 UI = f(config)

const ProductContent = ({ sections }) => (<div className="prose">{sections.map((section) => (<section key={section.title}><h2>{section.title}</h2>{renderContent(section)}</section>))}</div>
);

优势：

• 动态生成能力：可以通过修改配置文件快速调整页面内容。