时间戳

首页 > 解决方案 > 什么时候在 React 中创建组件？

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>

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

示例 B

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

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

示例 C

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

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

标签： reactjscomponents

解决方案

编程中有一个常见的最佳实践，称为DRY（不要重复自己）。

我曾经在一篇文章（现在找不到，现在稍微修改了一下）中读到以下内容：

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

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

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

选项“C”是赢家，如果TimeLineLabel包含很多代码行，它将在多个组件中重用，或者将被定制，然后为它创建一个新的组件文件并将其导入到任何地方是个好主意你要。

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

推荐阅读