Почему React разработчики не пишут циклы for, while?

Question

[hulktoster]

Я например ни разу не видел чтобы кто-то писал такие циклы в React коде, а значит их или пишут очень редко или вообще не пишут. Почему так? Это противоречит принципам react?

Comments

[Andrew]

Придумайте задачу в которой "лучше" использовать for/while , нежели map/filter/reduce

[Robur]

Andrew,
for (let data of datas) await myFunc(data)

[BadCoder1337]

Robur,
Если порядок не важен, то функциональным способом быстрей, так как запросы выполняются параллельно.
await Promise.all(datas.map(myFunc))

[Robur]

BadCoder1337, а если и результат не важен то можно вообще этот код удалить, но при чем тут все это к тому коду что я написал? Он содержит конкретную логику, и является ответом на комментарий выше.

[BadCoder1337]

Robur, интересно, какую конкретную логику можно было уложить в 1 for и 1 абстрактную myFunc?

[Robur]

BadCoder1337, вы реально не видите разницы в работе кода между моим и вашим примерами?

[BadCoder1337]

Robur, я с самого начала оговорил условие при котором цикл можно заменить на map ничего не потеряв

Если порядок [вызовов myFunc] не важен

[Robur]

BadCoder1337 ну да, и это не имеет никакого отношения к моему сообщению.
Код другой, логика другая, результат работы другой, заменить вашим кодом мой пример нельзя, они делают разное и к чему вы его тут привели - совершенно не понятно.
Хотели показать что знаете про Promise.all? Ну хорошо.

Answer 1

[hzzzzl]

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 }
  </>
  )
}

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

Answer 2

[Кирилл Мокевнин]

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

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

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

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

Comments

[hulktoster]

Уже знаю благодаря вам что в React переменные, циклы for и while не используются. Можете просто перечислить что еще не используется то что используется на чистом JS или то что используется очень редко? Хотя бы несколько.

[Кирилл Мокевнин]

hulktoster, я наверное бы по другому вопрос формулировал. Например я пишу на js и нигде не использую циклов, только функции высшего порядка. Это можно видеть по коду, который я приложил выше. Тут больше вопрос в том кто какого стиля придерживается. Если функционального то циклов и переменных не будет, если императивного то будут.

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

[antonstolar]

Kirill Mokevnin, а вам разрешают на работе писать на чистом JS?) а то я думал что все компании заставляют писать только на библиотеках и фреймворках клиентскую часть) или вы сам на себя работаете?
А что вы имеете ввиду под "мутировать стейт напрямую"? А то я что-то не понял)

[Кирилл Мокевнин]

antonstolar, наличие библиотек и фреймворков не говорит о том что вы не пишите внутри них код, бизнес-логику например. Не важно реакт у вас или еще что-то, внутри всегда будет много кода, который написан на "чистом js".

> А что вы имеете ввиду под "мутировать стейт напрямую"? А то я что-то не понял)

Просто посмотрите как идет работа со стейтом в реакте. Как работает this.setState()

[Саша Железовский]

antonstolar, с Hexlet(а) он и на курсах у них в бесплатном разделе есть неплохое видео, объясняющее что такое декларативный стиль в авторстве Kirillа

Answer 3

[Саша Железовский]

react это целая религия декларативного подхода. Это одна из основных идей фреймворка/библиотеки. Циклы for и while , как и многое другое, в этом подходе - зло.

Comments

[hulktoster]

Уже знаю благодаря вам что в React зло это переменные, циклы for и while. Можете просто перечислить что еще зло? Хотя бы несколько.

[Саша Железовский]

hulktoster, про декларативный стиль написано не мало. Вот пример на русском https://medium.com/@linus2228/%D0%B4%D0%B5%D0%BA%D...

Answer 4

[grinat]

Просто реакт довольно хреновенький шаблонизатор, вот и приходится выкручиваться. И это ты ещё не видел что бывает если компонент хитрый, приходится пить смузи с веществами, дабы понять ход мысли предшественика.

Comments

[profesor08]

Типично, если надо быстро что-то делать, особенное если в несколько итерраций обновлений/правок и хотелок.

[Саша Железовский]

боже, вы серьезно? причем тут шаблонизатор? Почитайте про декларативный подход