Comments 12
Использование тернарного оператора и && в JSX — костыль, вытекающий из того, что JSX компилируется в дерево вызовов React.createElement. Пользоваться ими можно, но читабельности коду они не добавляют, особенно когда растет вложенность. Лечится использованием компонентов высшего порядка, выносом «тупых» кусков в небольшие SFC и созданием методов типа renderTableHeader (когда выделение SFC потребует передавать state).
Тем, кому не по душе использование тернарных операторов, .map и && прямо в XML-подобном коде, рекомендую попробовать этот jsx-control-statements плагин для babel. + к нему ещё есть плагин для eslint.
Конечно каждый делает как удобно, но имхо юзать jsx-control-statements сверх грязно.
Конечно интересна любая критика.
Но использовать огород из If блоков вообще жестьЭто из XSLT. Там и похлеще конструкции. XLST это язык преобразования одних XML документов в другие по ряду правил. Декларативный. Очень многие конторы раньше его использовали в качестве шаблонизатора.
Как только понял и попробовал использовать && и || стало в 100 раз удобнее и читаемость возросла в разы.
Это всё вкусовщина. Кому-то нравятся .map-ы внутри XML блоков, а у кого-то глаза кровью заливаются от столько чудного перемешивания совершенно непохожих синтаксисов. Кто-то пишет вместо всех if-ов в коде (даже обычном JS) конструкции с &&. Кому-то по вкусу вложенные 10-кратно друг в друга тернарные операторы (?:). Кто-то использует ~~number для indexOf. Кому-то даже !! по глазам бьёт. Кто-то приемлет хаки с +string, а кто-то требует принудительных Number(str). Кто-то использует круглые скобки для (el) => {} стрелочных функций, а кому-то они мешают читать код. Кто-то не переносит на дух египетские кавычки, а кому-то только с ними и комфортно.
Лично на мой вкус, использование jsx-control-statements делает код очень однородным и наглядным. Избавляет его от множества неестественных для XML символов и конструкций. Т.е. на мой вкус он как раз избавляет код от грязи. А обычный JSX код читать просто больно. Единственное, что я бы поменял, это длинное слово condition на что-нибудь попроще и убрал deprecated статус в <Else/>.
Disclaimer: всё что ниже моё личное глубокое IMHO и я никому не навязываю свою точку зрения:
<some>
{
someBoolVar ? <div>
<span>1</span>
</div>
: <div>
<span>2</span>
</div>
}
</some>Вот скажем типовой код без ^. Точнее как бы я его написал. Опустил аттрибуты и прочую логику для простоты и наглядности. Что меня тут напрягает? Первое это символы ? и :. Они в отличие от обычного кода легко теряются на фоне разнообразного JSX синтаксиса. Их нужно прямо выискивать. Символ ? идёт в середине строки, а : вначале. Очень не наглядно. Мой внутренний перфекционизм прямо вздрагивает. Оба <div/>-а также начинаются в разных местах. Второй вообще так после :, что, имхо выглядит реально дико. Как-будто какая-то наскальная живопись. Т.к. я не использую египетских кавычек нигде, то и две строки на {} ушло. В целом я воспринимают такой код как ребус. А ведь реальный код бывает сильно сложнее. Всякие аттрибуты вычисляемые, сложное содержимое, условие может быть сложнее, чем просто bool-переменная. И начинается малочитаемый ад из нагромождения всех видов скобок и кавычек, и даже подстветка синтаксиса не выручает.
В случае jsx-control… выглядеть это будет так:
<some>
<If condition={someBoolVar}>
<div>
<span>1</span>
</div>
</If>
<If condition={!someBoolVar}>
<div>
<span>2</span>
</div>
</If>
</some>С первого взгляда ясно что где и почему. Остаётся лишь погрузиться в детали. Сделать это тривиально, т.к. все отступы просты и идентичны. Более того, можно даже не смотреть блок выше, чтобы понять блок ниже, т.к. не тернарный оператор.
А что бы вы сказали, на такой вид?
<someTag
attr1={1}
attr2="2"
>
inner
</someTag>Таким образом я пишу все теги где появляется проблема с читаемостью аттрибутов. Громоздно, но опрятно и легко воспринимаемо. Тоже на костёр? :) Тоже грязь?
<some>
{ someBoolVar && <div>
<span>1</span>
</div> || <div>
<span>2</span>
</div> }
</some>
Не вижу смысла ставить перенос строки после { и переносить } на следующую.
По поводу самого последнего кода с атрибутами, пишу точно так же, так же как и преттир подсказывает или правит автоматом)
Не вижу смысла ставить перенос строки после { и переносить } на следующую.
Ну дык это просто разные style-guide-ы. А ваш вариант я рассматриваю как ещё менее, читаемый, чем тот что предложил я (без jsx-control). У вас, помимо прочего, теперь начало 2-го тега и конец 1-го тега смешались в одной строке и отличаются только косой чертой. Вот как раз за подобный код я очень не люблю JSX. На мой глаз это выглядит как беспорядочное нагромождение скобок и кавычек без ясно различимой семантики. Необходимо пробежаться глазами по всему блоку, причём внимательно, чтобы понять что к чему. Т.е. "распарсить" головой всё, чтобы понять часть. И это на элементарном то примере. А почему? Потому что вложенность почти испарилась. Это чем-то сродни тому, как писать всё без отступов вовсе. Очень многим программистам на начальном этапе обучения так проще (я не шучу, мне так они объясняли).
А что в варианте с jsx-control-ом, по вашему, уменьшает читаемость, да ещё и аж в 100 раз (вы сами так написали)? Я бы отметил следующие минусы:
- код более громоздкий
- условие дублируется дважды
Не совсем понимаю, где тут разница в восприятии аж в 2 порядка.
На вкус и цвет...)
best practice
Ну вы же понимаете, что best practice от конторы к конторе сильно различается ;) Тут не утихают жаркие дебаты пробелы-vs-табы, египетские кавычки vs на отдельной строке, а вы про JSX. Мне вот ваш код читать будет тяжело. Конечно со временем я привыкну. Но только со временем. Думаю вам мой код читать будет до приторного просто и скучно. Но в моей системе ценностей это важнее, чем кол-во строчек. Что что, а на них я не экономлю. Совсем.
В общем подведу итоги:
- это субъективно всё, смысла спорить нет;
- фразу "читаемость возросла в разы" вы написали просто так, ибо ни в разы, ни вообще она не возросла.
Согласны? Если да, предлагаю на этом дебаты закончить :)
Тернарные операторы и логическое “И” в React.js