Хороші та погані сторони JSX

JSX де-факто є стандартом для оголошення структури компонентів в React-додатках. Він став популярним через давно знайомий синтаксис, в даному випадку синтаксис HTML. Але не тільки через це. Я особисто почав використовувати JSX, тому що він менш багатослівний, ніж звичайний JavaScript, і, я думаю, що це головна причина.

Порівняйте ці два зразки коду:

<div>
  <img src="{url}">
  <span classname="full-name">{fname + lname}</span>
</div>

React.createElement(
  'div',
  null,
  React.createElement('img', { src: url, className: 'avatar' }),
  React.createElement(
    'span',
    { className: 'full-name' },
    fname + lname
  )
);

Не так легко зрозуміти, що відбувається в простому прикладі з JavaScript. Є багато зайвого, наприклад, React.createElement, null. У той час як на прикладі JSX зрозуміло, що відбувається.

JSX здається хорошим вибором, і він добре працює, поки ви не починаєте пов'язувати його з JavaScript. Він просто не поєднається, бо JavaScript має оператори, а JSX засновано на виразах.

Можна вбудувати просту умову, використовуючи тернарний оператор.

<div>
  <img src="{url}">
  {isAuth ? <editbutton> : <addfriendbutton>}
</addfriendbutton></editbutton></div>

Але ви не можете йти далі без хаків.

<nav classname="navbar">
  {
    switch (userRole) {
      case 'admin':
        <adminpanel>;
        break;
      case 'user':
        <userpanel>;
        break;
      default:
        <statuspanel>;
    }
  }
</statuspanel></userpanel></adminpanel></nav>

Ця проблема була виявлена. Ось чому в JavaScript планується додати do expressions, які дозволять розглядати блоки коду як вирази. Через цю несумісність між JSX і JavaScript, JSX Control Statements зникає.

<nav classname="navbar">
  <choose>
    <when 'admin'}="" =="=" condition="{userRole">
      <adminpanel>
    </adminpanel></when>
    <when 'user'}="" =="=" condition="{userRole">
      <userpanel>
    </userpanel></when>
    <otherwise>
      <statuspanel>
    </statuspanel></otherwise>
  </choose>
</nav>

Це може виглядати як HTML шаблонування, але це не так. Це JSX, що компілюється в звичайний JavaScript. Важливою частиною тут є те, що тепер у нас є єдиний спосіб робити такі речі, які, в свою чергу, забезпечують набагато більшу гнучкість. Іронія полягає в тому, що JSX дозволяє нам уникнути багатослів'я JavaScript, але в гонитві за гнучкістю він стає ще більш багатослівним. Проте немає нічого менш багатослівного в JavaScript, ніж сам JavaScript. JSX можна спростити за допомогою hyperscript або використовуючи масив літералів замість тегів.

nav({className: 'navbar'},
  choose(
    when({condition: userRole === 'admin'},
      AdminPanel()),
    when({condition: userRole === 'user'},
      UserPanel()),
    otherwise(
      StatusPanel())))

['nav', {className: 'navbar'},
  ['choose',
    ['when', {condition: userRole === 'admin'},
      [AdminPanel]],
    ['when', {condition: userRole === 'user'},
      [UserPanel]],
    ['otherwise',
      [StatusPanel]]]]

Це не змінює того факту, що ми приречені продовжувати додавати більше синтаксису в JSX, адже нам це потрібно. Або ми залишаємося з DSL і продовжуємо використовувати більше коду, або вибираємо мову без будь-яких подібних проблем.