Разметка React с JSX

Содержание туториала по React JSX — это расширение синтаксиса для JavaScript, позволяющее писать HTML-подобную разметку внутри файла JavaScript. Хотя есть и другие способы написания компонентов, большинство разработчиков React предпочитают лаконичность JSX, и большинство кодовых баз используют его.

JSX: добавление разметки в JavaScript

Интернет был построен на HTML, CSS и JavaScript. В течение многих лет веб-разработчики хранили контент в HTML, дизайн в CSS и логику в JavaScript — часто в отдельных файлах. Контент был размечен внутри HTML, а логика страницы жила отдельно в JavaScript. Но по мере того, как Интернет становился все более интерактивным, содержание все больше определялось логикой. JavaScript отвечал за HTML. Вот почему в React логика рендеринга и разметка живут в одном месте — в компонентах. Сохранение логики рендеринга кнопки и разметки вместе гарантирует их синхронизацию друг с другом при каждом редактировании. И наоборот, несвязанные детали, такие как разметка кнопки и разметка боковой панели, изолированы друг от друга, что делает более безопасным изменение любой из них по отдельности. Каждый компонент React — это функция JavaScript, которая может содержать некоторую разметку, которую React отображает в браузере. Компоненты React используют расширение синтаксиса под названием JSX для представления этой разметки. JSX очень похож на HTML, но немного строже и может отображать динамическую информацию. Лучший способ понять это — преобразовать некоторую разметку HTML в разметку JSX. JSX и React — это две разные вещи. Они часто используются вместе, но вы можете использовать их независимо друг от друга. JSX — это расширение синтаксиса, а React — это библиотека JavaScript.

Преобразование HTML в JSX

Предположим, что у вас есть некоторый (совершенно правильный) HTML:

<h1>Todos</h1>
<img src="https://example.com/userpic.jpg" alt="userpic" class="photo" />
<ul>
  <li>Learn JavaScript</li>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
</ul>

И вы хотите поместить его в свой компонент:

export default function TodoList() {
  return (
    // ???
  )
}

Если вы скопируете и вставите его как есть, он не будет работать.

// App.js

export default function TodoList() {
  // Этот код не будет работать
  return (
    <h1>Todos</h1>
    <img src="https://example.com/userpic.jpg" alt="userpic" class="photo" />
    <ul>
      <li>Learn JavaScript</li>
      <li>Learn HTML</li>
      <li>Learn CSS</li>
    </ul>
  );
}

// App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (5:4)

// App.js: Смежные элементы JSX должны быть заключены в закрывающий тег. Вам нужен фрагмент JSX <>...</>? (5:4)

Это потому, что JSX строже и имеет несколько больше правил, чем HTML. Если вы прочитали сообщения об ошибках выше, они помогут вам исправить разметку, или вы можете следовать приведенному ниже руководству.

Правила JSX

1. Возвращать один корневой элемент

Чтобы вернуть несколько элементов из компонента, оберните их одним родительским тегом. Например, вы можете использовать <div>:

<div>
  <h1>Todos</h1>
  <img src="https://example.com/userpic.jpg" alt="userpic" class="photo" />
  <ul>
    ...
  </ul>
</div>

Если вы не хотите добавлять в разметку лишний <div>, вы можете вместо этого написать <> и </>:

<>
  <h1>Todos</h1>
  <img src="https://example.com/userpic.jpg" alt="userpic" class="photo" />
  <ul>
    ...
  </ul>
</>

Этот пустой тег называется фрагментом (Fragment). Фрагменты позволяют группировать элементы, не оставляя следов в HTML-дереве браузера.

Почему необходимо обернуть несколько тегов JSX?

JSX выглядит как HTML, но внутри он трансформируется в простые объекты JavaScript. Вы не можете вернуть два объекта из функции, не поместив их в массив. Это объясняет, почему вы также не можете вернуть два тега JSX, не завернув их в другой тег или фрагмент.

2. Закрывать все теги

JSX требует, чтобы теги были закрыты явно: самозакрывающиеся теги, такие как <img>, должны стать <img />, а теги-обертки, такие как <li>апельсины, должны быть записаны как <li>апельсины</li>.

3. Пишите все в camelCase

JSX превращается в JavaScript, а атрибуты, написанные в JSX, становятся ключами объектов JavaScript. В ваших собственных компонентах вам часто потребуется считывать эти атрибуты в переменные. Но JavaScript имеет ограничения на имена переменных. Например, их имена не могут содержать тире или быть зарезервированными словами, такими как class. Вот почему в React многие атрибуты HTML и SVG записываются в camelCase. Например, вместо stroke-width вы используете strokeWidth. Поскольку class является зарезервированным словом, в React вместо этого вы пишете className, названное в честь соответствующего DOM свойства:

<img src="https://example.com/userpic.jpg" alt="userpic" className="photo" />

Совет: используйте конвертер JSX

Преобразование всех этих атрибутов в существующую разметку может быть утомительным. Рекомендуется использовать конвертер для перевода существующих HTML и SVG в JSX. Конвертеры очень полезны на практике, но все же стоит понимать, что происходит, чтобы вы могли комфортно писать JSX самостоятельно. Вот окончательный результат:

export default function TodoList() {
  return (
    <>
      <h1>Todos</h1>
      <img
        src="https://example.com/userpic.jpg"
        alt="userpic"
        className="photo"
      />
      <ul>
        <li>Learn JavaScript</li>
        <li>Learn HTML</li>
        <li>Learn CSS</li>
      </ul>
    </>
  );
}

Резюме

Теперь вы знаете, почему существует JSX и как его использовать в компонентах:

• React компоненты группируют логику рендеринга вместе с разметкой, потому что они связаны.
• JSX похож на HTML с некоторыми отличиями. Вы можете использовать конвертер, если вам нужно.
• Сообщения об ошибках часто укажут вам правильное направление для исправления разметки.

Содержание туториала по React Прежде чем ваши компоненты отобразятся на экране, они должны быть обработаны React. Понимание шагов этого процесса поможет вам понять, как выполняется ваш код, и объяснить его поведение. Представьте, что ваши компоненты — повара на кухне, собирающие вкусные блюда из ингредиентов. В этом сценарии React — это официант, который принимает запросы от клиентов и приносит им их заказы. Этот процесс запроса и обслуживания пользовательского интерфейса состоит из трех этапов:

1. Запуск рендера (доставка заказа гостя на кухню)
2. Рендер компонента (подготовка заказа на кухне)
3. Фиксация (commit) в DOM (размещение заказа на столе)

Шаг 1. Запуск рендеринга

Есть две причины для рендеринга компонента:

• Это начальный рендер компонента.
• Состояние компонента (или одного из его предков) было обновлено.

Начальный рендер

Когда ваше приложение запускается, вам нужно запустить первоначальный рендеринг. Фреймворки и песочницы иногда скрывают этот код, но это делается путем вызова createRoot с целевым узлом DOM, а затем вызова его метода рендеринга с вашим компонентом:

// index.js

import Image from './Image.js';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<Image />);

// Image.js

export default function Image() {
  return <img src="https://example.com/image.jpg" alt="image" />;
}

Рендеринг при обновлении состояния

После первоначального рендеринга компонента вы можете запускать дальнейшие рендеры, обновляя его состояние с помощью функции set. Обновление состояния вашего компонента автоматически ставит рендеринг в очередь. (Вы можете представить это как гостя ресторана, который заказывает чай, десерт и другие блюда, после того как сделал свой первый заказ, в зависимости от состояния жажды или голода.)

Шаг 2: React визуализирует ваши компоненты

После запуска рендеринга React вызывает ваши компоненты, чтобы выяснить, что отображать на экране. «Рендеринг» — это React, вызывающий ваши компоненты.

• При первоначальном рендеринге React вызовет корневой компонент.
• Для последующих рендеров React будет вызывать функциональный компонент, обновление состояния которого инициировало рендеринг.

Этот процесс является рекурсивным: если обновленный компонент возвращает какой-то другой компонент, React отрисовывает этот компонент следующим, а если этот компонент также что-то возвращает, он отрисовывает этот компонент следующим и так далее. Процесс будет продолжаться до тех пор, пока не останется вложенных компонентов и React точно не будет знать, что должно отображаться на экране. В следующем примере React вызовет Gallery() и Image() несколько раз:

// Gallery.js

export default function Gallery() {
  return (
    <section>
      <h1>Inspiring Sculptures</h1>
      <Image />
      <Image />
      <Image />
    </section>
  );
}

function Image() {
  return <img src="https://example.com/image.jpg" alt="image" />;
}

// index.js

import Gallery from './Gallery.js';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<Gallery />);

• Во время первоначального рендеринга React создаст узлы DOM для тегов <section>, <h1> и трех тегов <img>.
• Во время повторного рендеринга React вычислит, какие из их пропсов, если таковые имеются, изменились с момента предыдущего рендеринга. Он ничего не будет делать с этой информацией до следующего шага, фазы фиксации.

Рендеринг всегда должен быть чистым:

• При тех же входах, тот же выход. При одинаковых входных данных компонент всегда должен возвращать один и тот же JSX. (Когда кто-то заказывает салат с помидорами, он не должен получать салат с луком.)
• Он думает только о своих делах. Он не должен изменять какие-либо объекты или переменные, существовавшие до рендеринга. (Один заказ не должен изменять чей-либо другой заказ.)

В противном случае вы можете столкнуться с запутанными ошибками и непредсказуемым поведением по мере усложнения вашей кодовой базы. При разработке в «строгом режиме» React дважды вызывает функцию каждого компонента, что может помочь обнаружить ошибки, вызванные нечистыми функциями.

Оптимизация производительности

Поведение рендеринга по умолчанию всех компонентов, вложенных в обновленный компонент, не является оптимальным для производительности, если обновленный компонент находится очень высоко в дереве. Если вы столкнулись с проблемой производительности, существует несколько способов ее решения, описанных в разделе «Производительность». Не оптимизируйте преждевременно.

Шаг 3: React фиксирует изменения в DOM

После рендеринга (вызова) ваших компонентов React изменит DOM.

• Для начального рендеринга React будет использовать DOM API appendChild() для размещения на экране всех созданных DOM-узлов.
• Для повторного рендеринга React применит минимально необходимые операции (рассчитанные во время рендеринга), чтобы привести DOM в соответствие с последним результатом рендеринга.

React изменяет DOM узлы только в том случае, если между рендерами есть разница. Например, вот компонент, который каждую секунду перерисовывается с разными пропсами, переданными от его родителя. Обратите внимание, как вы можете добавить некоторый текст в <input>, обновив его значение, но текст не исчезнет при повторном рендеринге компонента:

// Clock.js

export default function Clock({ time }) {
  return (
    <>
      <h1>{time}</h1>
      <input />
    </>
  );
}

Это работает, потому что на этом последнем шаге React только обновляет содержимое <h1> новым значением времени. Он видит, что <input> появляется в JSX в том же месте, что и в прошлый раз, поэтому React не касается <input> или его значения.

Отрисовка браузером

После того, как рендеринг завершен и React обновил DOM, браузер перерисует экран. Хотя этот процесс известен как "рендеринг в браузере", мы будем называть его "отрисовкой", чтобы избежать путаницы в остальной части этого руководства.

Резюме

Любое обновление экрана в приложении React происходит в три этапа:

• Запуск
• Рендеринг
• Фиксация

Вы можете использовать строгий режим для поиска ошибок в ваших компонентах. React не затрагивает DOM, если результат рендеринга такой же, как и в прошлый раз.