在开发时，经常遇到一些高度重复但略有差异的 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>
);

优势：

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