Можно ли избежать использования .map () дважды над одним и тем же массивом, даже если компоненты, которые отображает map (), не являются братьями и сестрами?

Question

Итак, у меня есть некоторый рабочий код, но я просто чувствую, что есть решение, в котором я могу использовать только один .map (), и я его не вижу.

Компоненты не являются братьями и сестрами (они не используют один и тот же родительский компонент), поэтому для решения этой проблемы я просто дважды сделал .map () над одним и тем же массивом объектов, но мне кажется, что это пустая трата ресурсов и что для такой ситуации должно быть лучшее решение.

Вот код

<div className="pricepoints-form">
    <Tabs className="tabs">
        <TabList>
            {
                this.state.pricepointsData.map(pricepoint => (
                    <Tab className="tab">{pricepoint.name}</Tab>
                ))
            }
        </TabList>
        {
            this.state.pricepointsData.map(pricepoint => (
                <TabPanel>
                    <Pricepoint
                        pricepoint={pricepoint}
                        displayLast4={this.state.displayLast4}
                    />
                </TabPanel>
            ))
        }
    </Tabs>
</div>

Answer 1

Можно ли избежать использования .map() дважды по одному и тому же массиву, даже если компоненты, которые отображает map (), не являются братьями и сестрами?

Технически, да, это возможно. Но давайте посмотрим на то, что вы действительно оптимизируете здесь.

map - это, по сути, цикл for, который присваивает значения новому массиву:

// example
function map(transform) {
  const ret = []
  for (let i = 0; i < this.length; i++) {
    ret.push(transform(this[i], i, this))
  }
  return ret
}

это означает, что вы можете заменить функцию map своей собственной функцией, которая запускает цикл и создает два массива:

function myMap(transform1, transform2) {
  const r1 = []
  const r2 = []
  for (let i = 0; i < this.length; i++) {
    r1.push(transform1(this[i], i, this))
    r2.push(transform2(this[i], i, this))
  }
  return [r1, r2]
}

Использование этой новой функции будет в лучшем случае неудобным:

const [tabs, panels] = myMap.call(this.state.pricepointsData, pricepoint => (...), pricepoint => (...))

...
<TabList>
  { tabs }
</TabList>
{ panels }
...

Таким образом, реальный вопрос должен быть: стоит ли эта абстракция?

И к этому у меня встречный вопрос:

Что больше, 2x1 или 1x2?

Вы можете использовать два цикла, каждый из которых выполняет одно действие (2 map вызовов), или вы можете использовать один цикл, который выполняет два действия (вызов 1 myMap).