bdFregat

hulktoster, map/filter/reduce делают как раз то, что надо в реакте - преобразовывают массив с данными в массив с компонентами реакта, можно конечно и через циклы, но это будет больше писанины и будет менее наглядно

data = [........]

render() {
  return (
  <>
    { data.map(x => <MyComponent prop1={x.prop1} prop2={x.prop2} />) }
  </>
  )
}

data = [........]

render() {
  const components = []
  for(let i = 0; i < data.length; i++) {
    const x = data[i]
    components.push(<MyComponent  prop1={x.prop1} prop2={x.prop2} />)
  }

  return (
  <>
    { components }
  </>
  )
}

и это только если надо что-то замапать, а если еще фильтровать итд, то строк в цикле больше и больше

Если очень узко, то функция `map` в отличие от цикла "отображает" набор, то есть обрабатывает каждый элемент и возвращает новую коллекцию. Именно это нужно делать когда мы работаем с JSX. А циклы это не функции, которые могут возвращать значения, это конструкция языка с помощью которой, например, можно собирать переменные. Из-за того что JSX это декларативная штука (мы описываем ее как есть, а не получаем в результате вычислений), циклы туда просто не встроить.

Циклы это пример императивного программирования, в то время как функции высшего порядка (filter, map, reduce) – декларативного (функциональный подход). Второй подход в js более канонический (ближе к функциональным языкам) и позволяет писать гораздо более понятный и лаконичный код. При условии, конечно, что вы знакомы с этой парадигмой.

Кстати в декларативном коде не используют переменные (если писать правильно), они там просто не нужны. Только константы.

Вот посмотрите код из бекенд проекта в котором нет ни одного цикла: https://github.com/Hexlet/hexlet-exercise-kit/blob...

React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.

react.js docs

At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.

react.js docs again

https://facebook.github.io/react/docs/composition-...

p.s. секция Specialization отвечает на твой вопрос

Сторонний компонент, это обычно всего лишь "вьюха". Хорошие компоненты, таковыми и являются (пример) (react virtualized)

Чтобы передать в него свойства - мы просто передаем свойства. Опять же, в качестве примера (react select 2). Передаем в него, например, options.
Так же, у этого "хорошего" компонента, на изменение автором задуман onChange..

<Select
	name="form-field-name"
	value="one"
	options={options}
	onChange={this.setUser} // тот самый onChange
/>

Уже в нем можно смело "дергать" экшен-крейтор родителя, банально:

// текущий компонент
setUser(e) { this.props.setUser(e.target.value) }
// родитель
setUser(id) { this.props.actions.setUser(id) } // вызов redux action-creator

В любом случае, вариантов обратится из потомка к родителю всего два. Причем первый используется в 90% случаев - это передать в props функцию-обработчик.
Второй вариант, созданием компонентов-оберток используется реже и обычно уже на каких-то замороченных ситуациях.