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

02 лютого 2017 12:12 Victoria 861 0

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

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

<div>
  <img src={url} className='avatar' />
  <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 className='profile'>
  <img src={url} />
  {isAuth ? <EditButton /> : <AddFriendButton />}
</div>

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


<nav className='navbar'>
  {
    switch (userRole) {
      case 'admin':
        <AdminPanel />;
        break;
      case 'user':
        <UserPanel />;
        break;
      default:
        <StatusPanel />;
    }
  }
</nav>

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

<nav className='navbar'>
  <Choose>
    <When condition={userRole === 'admin'}>
      <AdminPanel />
    </When>
    <When condition={userRole === 'user'}>
      <UserPanel />
    </When>
    <Otherwise>
      <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 і продовжуємо використовувати більше коду, або вибираємо мову без будь-яких подібних проблем.

Джерело перекладу

861 3

Схожі матеріали:

Коментарі:

Авторизуйтесь, щоб залишити коментар.