Когда создавать компонент в React?

Question

Есть ли лучший способ превратить повторяющийся код в компонент с 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>

Супер просто, но все может всегда усложняется в будущем. Я также мог бы просто oop это:

Пример B

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

Или я мог бы oop компонент, который я бы сделал:

Пример C

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

Есть ли что-то, что более "React Way", учитывая простоту?

Answer 1

В программировании есть общепринятая практика под названием DRY (Не повторяйте себя).

Я однажды прочитал в статье (не могу найти ее прямо сейчас, и я изменил ее сейчас bit) следующее:

Если вы обнаружите, что копируете и вставляете фрагменты кода в свой файл, или вам понадобился тот же фрагмент в другом файле, рекомендуется создать повторно используемый компонент из этого файла. кусок кода и начните его использовать.

Итак, вариант «A» исключен по этой причине, и если случилось так, что вы захотели добавить какие-то правила стиля или изменить имя класса метки вы сделаете этот фрагмент кода недоступным, если решите его масштабировать.

Теперь варианты «B» и «C» верны, но это зависит от сценария, которого вы пытаетесь достичь.

Вариант «C» является победителем, если TimeLineLabel состоит из большого количества строк кода, он будет повторно использован более чем в одном компоненте или будет настроен, тогда рекомендуется создать новый композит nent для него и просто импортируйте его куда хотите.

В противном случае вариант «B» является победителем, если это один лайнер, подобный тому, что вы показываете, и вы будете использовать его только в этом файле только тогда опция «C» не требуется.