Reactjs 何时在React中创建组件？

对于何时使用React将重复代码转换为组件，是否有最佳实践？很明显，如果它是更复杂的重复代码，但以我正在处理的时间线为例：

示例A:

<label className="col col-2020">2020</label>
<label className="col col-2015">2015</label>
<label className="col col-2010">2010</label>
<label className="col col-2005">2005</label>
<label className="col col-2000">2000</label>

2020
2015
2010
2005
2000

超级简单，但事情总是会变得更复杂。我也可以循环它：

示例B

{      
[2020,2015,2010,2005,2000].map(year => (<label className={`col col-${year}`}>{year}</label>))
}

{
[20202015201020052000]。地图（年份=>（{year}））
}

或者我可以循环一个我要制作的组件：

示例C

{      
[2020,2015,2010,2005,2000].map(year => <TimeLineLabel year={year}/>)
}

{
[20202015201020052000]。地图（年份=>）
}

---

考虑到简单性，有没有一种更为“反应式”的方法呢？

一般来说，编程中有一种常见的最佳实践叫做

DRY

（不要重复）

我曾经在一篇文章中读到（现在找不到，我现在对它做了一些修改）如下：

如果您发现自己正在复制和粘贴文件中的代码块 或者您碰巧需要在另一个文件中使用相同的块，这是一个好方法 从这段代码创建一个可重用组件并开始 使用它

因此，由于这个原因，选项“A”被排除在外，如果您想要添加某种样式规则或更改标签的类名，那么如果您决定对其进行缩放，则会使这段代码无法维护

现在，选项“B”和“C”是正确的，但这取决于您试图实现的场景

如果

TimeLineLabel

包含大量代码行，它将在多个组件中重复使用，或者它将被自定义，那么最好为它创建一个新的组件文件，并将其导入任何您想要的位置

---

否则，选项“B”是赢家，如果它是一个像您所展示的一样的行程序，并且您只在该文件中使用它，那么就不需要选项“C”。

前两种方法甚至都不是

React

本身。只要尽可能用最少的代码完成工作，你不必向别人解释，因为这很难理解。根据我的经验，我认为你应该在以下情况下创建新组件：1。创建新的视图（页面）-句柄UI-句柄逻辑我们需要每个视图至少分离2个组件2。一些常见的事情，当您觉得需要复制代码时重复多次您应该创建新的组件来处理它