Полезные видео о фронтенде. Подпишись на Rutube

Сохранение и сброс состояния в React

10 месяцев назад·11 мин. на чтение

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

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

Дерево пользовательского интерфейса

Браузеры используют множество древовидных структур для моделирования пользовательского интерфейса. DOM представляет элементы HTML, CSSOM делает то же самое для CSS. Есть даже accessibility дерево. React также использует древовидные структуры для управления и моделирования пользовательского интерфейса, который вы создаете. React создает деревья пользовательского интерфейса из вашего JSX. Затем React DOM обновляет элементы DOM браузера, чтобы они соответствовали этому дереву пользовательского интерфейса. (React Native переводит эти деревья в элементы, специфичные для мобильных платформ.)

Состояние привязано к положению в дереве

Когда вы задаете состояние компонента, вы можете подумать, что это состояние «живет» внутри компонента. Но на самом деле состояние хранится внутри React. React связывает каждую часть состояния, которую он хранит, с правильным компонентом в зависимости от того, где этот компонент находится в дереве пользовательского интерфейса. В примере ниже есть только один JSX-тег <Counter />, но он отображается в двух разных позициях:

import { useState } from 'react';

export default function App() {
  const counter = <Counter />;
  return (
    <div>
      {counter}
      {counter}
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

Это два отдельных счетчика, поскольку каждый из них отображается в своей позиции в дереве. Обычно вам не нужно думать об этих позициях, чтобы использовать React, но может быть полезно понять, как он работает. В React каждый компонент на экране находится в полностью изолированном состоянии. Например, если вы визуализируете два компонента счетчика рядом, каждый из них получит свои собственные независимые состояния score и hover.

Как видите, при обновлении одного счетчика обновляется только состояние этого компонента:

import { useState } from 'react';

export default function App() {
  return (
    <div>
      <Counter />
      <Counter />
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

React будет сохранять состояние до тех пор, пока вы рендерите один и тот же компонент в одной и той же позиции. Чтобы увидеть это, увеличьте оба счетчика, затем удалите второй компонент, сняв флажок «Render the second counter», а затем добавьте его обратно, отметив его снова:

import { useState } from 'react';

export default function App() {
  const [showB, setShowB] = useState(true);
  return (
    <div>
      <Counter />
      {showB && <Counter />}
      <label>
        <input
          type="checkbox"
          checked={showB}
          onChange={(e) => {
            setShowB(e.target.checked);
          }}
        />
        Render the second counter
      </label>
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

Обратите внимание, как в тот момент, когда вы прекращаете рендеринг второго счетчика, его состояние полностью исчезает. Это потому, что когда React удаляет компонент, он уничтожает его состояние. Когда вы ставите галочку «Render the second counter», второй счетчик и его состояние инициализируются с нуля (score = 0) и добавляются в DOM. React сохраняет состояние компонента до тех пор, пока он отображается в своей позиции в дереве пользовательского интерфейса. Если он удаляется или другой компонент отображается в той же позиции, React отбрасывает его состояние.

Тот же компонент в той же позиции сохраняет состояние

В этом примере есть два разных тега <Counter />:

import { useState } from 'react';

export default function App() {
  const [isFancy, setIsFancy] = useState(false);
  return (
    <div>
      {isFancy ? <Counter isFancy={true} /> : <Counter isFancy={false} />}
      <label>
        <input
          type="checkbox"
          checked={isFancy}
          onChange={(e) => {
            setIsFancy(e.target.checked);
          }}
        />
        Use fancy styling
      </label>
    </div>
  );
}

function Counter({ isFancy }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }
  if (isFancy) {
    className += ' fancy';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

Когда вы ставите или снимаете флажок, состояние счетчика не сбрасывается. Независимо от того, является ли isFancy истинным или ложным, у вас всегда есть <Counter /> в качестве первого дочернего элемента div, возвращаемого корневым компонентом приложения: Это тот же компонент в той же позиции, поэтому с точки зрения React это тот же счетчик.

Для React важна позиция в UI дереве, а не в JSX разметке

Помните, что для React важна позиция в дереве пользовательского интерфейса, а не в разметке JSX! Этот компонент имеет два предложения return с разными JSX-тегами <Counter /> внутри и снаружи if:

import { useState } from 'react';

export default function App() {
  const [isFancy, setIsFancy] = useState(false);
  if (isFancy) {
    return (
      <div>
        <Counter isFancy={true} />
        <label>
          <input
            type="checkbox"
            checked={isFancy}
            onChange={(e) => {
              setIsFancy(e.target.checked);
            }}
          />
          Use fancy styling
        </label>
      </div>
    );
  }
  return (
    <div>
      <Counter isFancy={false} />
      <label>
        <input
          type="checkbox"
          checked={isFancy}
          onChange={(e) => {
            setIsFancy(e.target.checked);
          }}
        />
        Use fancy styling
      </label>
    </div>
  );
}

function Counter({ isFancy }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }
  if (isFancy) {
    className += ' fancy';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

Вы можете ожидать, что состояние сбросится, когда вы поставите галочку, но это не так! Это связано с тем, что оба этих тега <Counter /> отображаются в одной и той же позиции. React не знает, где вы размещаете условия в своей функции. Все, что он «видит», — это дерево, которое вы возвращаете. В обоих случаях компонент приложения возвращает <div> с <Counter /> в качестве первого дочернего элемента. Вот почему React считает их одним и тем же <Counter />. Вы можете думать о них как об одном и том же «адресе»: первый дочерний элемент первого дочернего элемента корня. Вот как React сопоставляет их между предыдущим и следующим рендерингом, независимо от того, как вы структурируете свою логику.

Сброс состояния разных компонентов в одном и том же месте

В этом примере установка флажка заменит <Counter> на <p>:

import { useState } from 'react';

export default function App() {
  const [isPaused, setIsPaused] = useState(false);
  return (
    <div>
      {isPaused ? <p>See you later!</p> : <Counter />}
      <label>
        <input
          type="checkbox"
          checked={isPaused}
          onChange={(e) => {
            setIsPaused(e.target.checked);
          }}
        />
        Take a break
      </label>
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

Здесь вы переключаетесь между различными типами компонентов в одной и той же позиции. Изначально первый дочерний элемент <div> содержал Counter. Но когда вы заменили p, React удалил Counter из дерева пользовательского интерфейса и уничтожил его состояние. Кроме того, когда вы визуализируете другой компонент в той же позиции, он сбрасывает состояние всего его поддерева.

import { useState } from 'react';

export default function App() {
  const [isFancy, setIsFancy] = useState(false);
  return (
    <div>
      {isFancy ? (
        <div>
          <Counter isFancy={true} />
        </div>
      ) : (
        <section>
          <Counter isFancy={false} />
        </section>
      )}
      <label>
        <input
          type="checkbox"
          checked={isFancy}
          onChange={(e) => {
            setIsFancy(e.target.checked);
          }}
        />
        Use fancy styling
      </label>
    </div>
  );
}

function Counter({ isFancy }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }
  if (isFancy) {
    className += ' fancy';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

Состояние счетчика сбрасывается при установке флажка. Хотя вы визуализируете счетчик, первый дочерний элемент div меняется с div на section. Когда дочерний элемент div был удален из DOM, все дерево под ним (включая Counter и его состояние) также было уничтожено. Как правило, если вы хотите сохранить состояние между повторными рендерингами, структура вашего дерева должна «соответствовать» от одного рендеринга к другому. Если структура отличается, состояние уничтожается, потому что React уничтожает состояние, когда удаляет компонент из дерева.

Вот почему вы не должны вкладывать определения функций компонентов.

Здесь функция компонента MyTextField определена внутри MyComponent:

import { useState } from 'react';

export default function MyComponent() {
  const [counter, setCounter] = useState(0);

  function MyTextField() {
    const [text, setText] = useState('');

    return <input value={text} onChange={(e) => setText(e.target.value)} />;
  }

  return (
    <>
      <MyTextField />
      <button
        onClick={() => {
          setCounter(counter + 1);
        }}
      >
        Clicked {counter} times
      </button>
    </>
  );
}

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

Сброс состояния в том же положении

По умолчанию React сохраняет состояние компонента, пока он остается в том же положении. Обычно это именно то, что вам нужно, поэтому это имеет смысл в качестве поведения по умолчанию. Но иногда вам может понадобиться сбросить состояние компонента. Рассмотрим это приложение, которое позволяет двум игрокам отслеживать свои очки во время каждого хода:

import { useState } from 'react';

export default function Scoreboard() {
  const [isPlayerA, setIsPlayerA] = useState(true);
  return (
    <div>
      {isPlayerA ? <Counter person="Taylor" /> : <Counter person="Sarah" />}
      <button
        onClick={() => {
          setIsPlayerA(!isPlayerA);
        }}
      >
        Next player!
      </button>
    </div>
  );
}

function Counter({ person }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>
        {person}'s score: {score}
      </h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

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

Отрисовать компоненты в разных положениях
Дать каждому компоненту явную идентификацию с key

Вариант 1: Рендеринг компонента в разных позициях

Если вы хотите, чтобы эти два счетчика были независимыми, вы можете визуализировать их в двух разных позициях:

import { useState } from 'react';

export default function Scoreboard() {
  const [isPlayerA, setIsPlayerA] = useState(true);
  return (
    <div>
      {isPlayerA && <Counter person="Taylor" />}
      {!isPlayerA && <Counter person="Sarah" />}
      <button
        onClick={() => {
          setIsPlayerA(!isPlayerA);
        }}
      >
        Next player!
      </button>
    </div>
  );
}

function Counter({ person }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>
        {person}'s score: {score}
      </h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

Изначально isPlayerA имеет значение true. Итак, первая позиция содержит состояние Counter, а вторая пуста.
Когда вы нажимаете кнопку «Next player», первая позиция очищается, но вторая теперь содержит счетчик.

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

Вариант 2: Сброс состояния с помощью ключа

Существует также другой, более общий способ сброса состояния компонента. Возможно, вы видели key при рендеринге списков. Ключи нужны не только для списков. Вы можете использовать ключи, чтобы React различал любые компоненты. По умолчанию React использует порядок внутри родителя («первый счетчик», «второй счетчик»), чтобы различать компоненты. Но ключи позволяют вам сказать React, что это не просто первый счетчик или второй счетчик, а конкретный счетчик — например, счетчик для Тейлора. Таким образом, React будет узнавать счетчик для Тейлора, где бы он ни появлялся в дереве. В этом примере два <Counter /> не имеют общего состояния, даже если они появляются в одном и том же месте в JSX:

import { useState } from 'react';

export default function Scoreboard() {
  const [isPlayerA, setIsPlayerA] = useState(true);
  return (
    <div>
      {isPlayerA ? (
        <Counter key="Taylor" person="Taylor" />
      ) : (
        <Counter key="Sarah" person="Sarah" />
      )}
      <button
        onClick={() => {
          setIsPlayerA(!isPlayerA);
        }}
      >
        Next player!
      </button>
    </div>
  );
}

function Counter({ person }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>
        {person}'s score: {score}
      </h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

Переключение между Тейлором и Сарой не сохраняет состояние. Это потому, что вы дали им разные ключи:

{
  isPlayerA ? (
    <Counter key="Taylor" person="Taylor" />
  ) : (
    <Counter key="Sarah" person="Sarah" />
  );
}

Указание ключа (key) говорит React использовать сам ключ как часть позиции, а не их порядок внутри родителя. Вот почему, даже если вы визуализируете их в одном и том же месте в JSX, с точки зрения React это два разных счетчика. В результате они никогда не будут совместно использовать состояние. Каждый раз, когда счетчик появляется на экране, создается его состояние. Каждый раз, когда он удаляется, его состояние уничтожается. Переключение между ними сбрасывает их состояние снова и снова. Помните, что ключи не являются глобально уникальными. Они только определяют положение внутри родителя.

Сброс значений формы с помощью ключа

Сброс состояния с помощью ключа особенно полезен при работе с формами. В этом приложении чата компонент <Chat> содержит состояние для вводимого текста:

import { useState } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';

export default function Messenger() {
  const [to, setTo] = useState(contacts[0]);
  return (
    <div>
      <ContactList
        contacts={contacts}
        selectedContact={to}
        onSelect={(contact) => setTo(contact)}
      />
      <Chat contact={to} />
    </div>
  );
}

const contacts = [
  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
  { id: 1, name: 'Alice', email: 'alice@mail.com' },
  { id: 2, name: 'Bob', email: 'bob@mail.com' },
];

Попробуйте ввести что-нибудь в поле ввода, а затем нажмите “Alice” или “Bob”, чтобы выбрать другого получателя. Вы заметите, что состояние ввода сохраняется, потому что <Chat> отображается в той же позиции в дереве. Во многих приложениях это может быть желаемым поведением, но не в приложении чата. Вы не хотите, чтобы пользователь отправил сообщение, которое он уже набрал, не тому человеку из-за случайного клика. Чтобы исправить это, добавьте key:

<Chat key={to.id} contact={to} />

Это гарантирует, что при выборе другого получателя компонент чата будет воссоздан с нуля, включая все состояния в дереве под ним. React также будет воссоздавать элементы DOM вместо их повторного использования. Теперь переключение получателя всегда очищает текстовое поле:

import { useState } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';

export default function Messenger() {
  const [to, setTo] = useState(contacts[0]);
  return (
    <div>
      <ContactList
        contacts={contacts}
        selectedContact={to}
        onSelect={(contact) => setTo(contact)}
      />
      <Chat key={to.id} contact={to} />
    </div>
  );
}

const contacts = [
  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
  { id: 1, name: 'Alice', email: 'alice@mail.com' },
  { id: 2, name: 'Bob', email: 'bob@mail.com' },
];

Сохранение состояния удаленных компонентов

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

Вы можете отобразить все чаты, а не только текущий, но скрыть все остальные с помощью CSS. Чаты не будут удалены из дерева, поэтому их локальное состояние будет сохранено. Это решение отлично работает для простых пользовательских интерфейсов. Но это может быть очень медленным, если скрытые деревья большие и содержат много узлов DOM.
Вы можете поднять состояние и сохранить ожидающее сообщение для каждого получателя в родительском компоненте. Таким образом, когда дочерние компоненты удаляются, это не имеет значения, потому что родительский компонент сохраняет важную информацию. Это наиболее распространенное решение.
Вы также можете использовать другой источник в дополнение к состоянию React. Например, вы, вероятно, хотите, чтобы черновик сообщения сохранялся, даже если пользователь случайно закроет страницу. Чтобы реализовать это, вы можете сделать так, чтобы компонент Chat инициализировал свое состояние, читая из localStorage, и сохранял черновики там же.

Независимо от того, какую стратегию вы выберете, чат с Алисой концептуально отличается от чата с Бобом, поэтому имеет смысл дать ключ к дереву <Chat> на основе текущего получателя.

Резюме

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

Frontend React Туториал по React

Как добавить React на сайт

10 месяцев назад·6 мин. на чтение

Как добавить скрипты React на сайт. Вам не нужно создавать весь веб-сайт с помощью React. Можно ограничиться добавление React в HTML. Добавление React в HTML не требует установки, занимает пару минут и позволяет сразу начать писать интерактивные компоненты.

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

Добавление React в HTML

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

Шаг 1. Добавьте корневой HTML-тег

Сначала откройте HTML-страницу, которую хотите отредактировать. Добавьте пустой тег <div>, чтобы отметить место, где вы хотите отобразить что-то с помощью React. Дайте этому <div> уникальное значение атрибута id. Например:

<!-- ... существующий HTML ... -->

<div id="like-button-root"></div>

<!-- ... существующий HTML ... -->

Он называется "корень" ("root"), потому что с него начинается дерево React. Такой корневой HTML-тег можно разместить в любом месте внутри тега <body>. Оставьте его пустым, потому что React заменит его содержимое вашим компонентом React. У вас может быть столько корневых тегов HTML, сколько вам нужно на одной странице.

Шаг 2: Добавьте теги `script`

На HTML-странице прямо перед закрывающим тегом </body> добавьте три тега <script> для следующих файлов:

react.development.js позволяет вам определять компоненты React.
react-dom.development.js позволяет React отображать HTML-элементы в DOM.
like-button.js — это место, где будет находиться код нашего компонента, который напишем на следующем шаге.

Теперь код HTML-страницы должен заканчиваться так:

    <!-- конец страницы -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="like-button.js"></script>
  </body>
</html>

Перед развертыванием веб-сайта в продакшн обязательно замените development.js на production.min.js. Сборки React для разработки предоставляют более полезные сообщения об ошибках, но сильно замедляют работу сайта.

Шаг 3: Создайте React компонент

Создайте файл с именем like-button.js рядом со своей HTML-страницей, добавьте этот фрагмент кода и сохраните файл. Этот код определяет React компонент под названием LikeButton.

'use strict';

function LikeButton() {
  const [liked, setLiked] = React.useState(false);

  if (liked) {
    return 'You liked this!';
  }

  return React.createElement(
    'button',
    {
      onClick: () => setLiked(true),
    },
    'Like'
  );
}

Шаг 4: Добавьте React компонент на страницу

Наконец, добавьте три строки в конец файла like-button.js. Эти строки кода находят <div>, который мы добавили в HTML на первом шаге, создают корень React, а затем отображают React компонент кнопки «Нравится» внутри него:

const rootNode = document.getElementById('like-button-root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));

Компоненты можно использовать повторно. Вы можете захотеть отобразить компоненты React в нескольких местах на одной HTML-странице. Это полезно, если части вашей страницы, основанные на React, отделены друг от друга. Вы можете сделать это, поместив несколько корневых тегов в свой HTML, а затем визуализировав компоненты React внутри каждого из них с помощью ReactDOM.createRoot(). Например:

В index.html добавьте дополнительный элемент-контейнер <div id="another-root"></div>.
В like-button.js добавьте в конце еще три строчки:

const anotherRootNode = document.getElementById('another-root');
const anotherRoot = ReactDOM.createRoot(anotherRootNode);
anotherRoot.render(React.createElement(LikeButton));

Если вам нужно отрендерить один и тот же компонент во многих местах, вы можете назначить CSS класс вместо id для каждого корня, а затем найти их все.

Шаг 5: Минифицируйте JavaScript для продакшена

Неминифицированный JavaScript может значительно замедлить загрузку страниц для пользователей. Перед развертыванием веб-сайта в продакшене рекомендуется минимизировать его скрипты.

Если у вас нет шага минификации для скриптов, вот один из способов его настройки.

npx terser -c -m -o like-button.min.js -- like-button.js

Если вы уже минимизируете скрипты своего приложений, ваш сайт будет готов к работе, если вы убедитесь, что развернутый HTML загружает версии React, заканчивающиеся на production.min.js следующим образом:

<script
  src="https://unpkg.com/react@18/umd/react.production.min.js"
  crossorigin
></script>
<script
  src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
  crossorigin
></script>

React с JSX

Приведенные выше примеры основаны на функциях, изначально поддерживаемых браузерами. Вот почему like-button.js использует вызов JavaScript функции, чтобы сообщить React, что отображать:

return React.createElement(
  'button',
  {
    onClick: () => setLiked(true),
  },
  'Like'
);

Однако React также предлагает возможность использовать вместо этого JSX, HTML-подобный синтаксис JavaScript:

return <button onClick={() => setLiked(true)}>Like</button>;

Эти два фрагмента кода эквивалентны. JSX — популярный синтаксис для описания разметки в JavaScript. Многие с ним знакомы и считают полезным для написания UI кода — как с React, так и с другими библиотеками.

Попробуйте JSX

Самый быстрый способ попробовать JSX — добавить на страницу компилятор Babel в теге <script> . Поместите его перед like-button.js, а затем в тег <script> для like-button.js добавьте атрибут type="text/babel":

  <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script src="like-button.js" type="text/babel"></script>
</body>

Теперь вы можете открыть like-button.js и заменить

return React.createElement(
  'button',
  {
    onClick: () => setLiked(true),
  },
  'Like'
);

на эквивалентный JSX код:

return <button onClick={() => setLiked(true)}>Like</button>;

Поначалу может показаться немного непривычным смешивать JS с разметкой, но вам это понравится. Ознакомьтесь со статьей Разметка с JSX. Компилятор Babel в теге <script> отлично подходит для обучения и создания простых демо. Однако это замедляет ваш сайт и не подходит для продакшена. Когда вы будете готовы двигаться дальше, удалите тег <script> с Babel и удалите атрибут type="text/babel". Вместо этого в следующем разделе мы настроим препроцессор JSX для преобразования всех тегов <script> из JSX в JS.

Добавление JSX в проект

Добавление JSX в проект не требует сложных инструментов, таких как сборщик или сервер разработки. Добавление препроцессора JSX очень похоже на добавление препроцессора CSS. Перейдите в папку проекта в терминале и вставьте эти две команды (убедитесь, что у вас установлен Node.js):

npm init -y (if it fails, here’s a fix)
npm install @babel/cli@7 babel-preset-react-app@10

Если вы получаете сообщение об ошибке "Invalid name" при запуске npm init -y, переименуйте папку проекта, чтобы она содержала только строчные буквы ASCII или дефисы (например, my-project), и повторите попытку. В данном случае npm будет нужен только для установки препроцессора JSX. И React, и код приложения могут оставаться в виде тегов <script> без изменений.

Запуск препроцессора JSX

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

Создайте папку с именем src.
В терминале выполните следующую команду:

npx babel --watch src --out-dir . --presets babel-preset-react-app/prod

Не ждите завершения. Эта команда запускает автоматическое наблюдение за изменениями в JSX внутри src.

Переместите свой файл like-button.js c JSX в папку src.

Наблюдатель создаст предварительно обработанный like-button.js с простым JavaScript кодом, подходящим для браузера. Если вы видите сообщение об ошибке "You have mistakenly installed the babel package" ("Вы установили пакет babel по ошибке"), возможно, вы пропустили предыдущий шаг (Добавление JSX в проект). Выполните его в той же папке, а затем повторите попытку. Инструмент, который вы только что использовали, называется Babel, и вы можете узнать больше о нем из его документации. В дополнение к JSX он позволяет вам использовать самые последние функции синтаксиса JavaScript, не беспокоясь о поломках в старых браузерах. Если вы освоились с инструментами сборки и хотите, чтобы они делали для вас больше, то здесь вы можете найти обзор на некоторые из самых популярных и доступных наборов инструментов.

React без JSX

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

Используйте альтернативу JSX, такую как htm, которая использует шаблонные строки JavaScript вместо компилятора.
Используйте React.createElement() со специальной структурой, описанной ниже.

С JSX вы бы написали такой компонент:

function Hello(props) {
  return <div>Hello {props.toWhat}</div>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello toWhat="World" />);

С React.createElement() вы бы написали это так:

function Hello(props) {
  return React.createElement('div', null, 'Hello ', props.toWhat);
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, { toWhat: 'World' }, null));

Он принимает несколько аргументов: React.createElement(component, props, ...children). Вот как они работают:

Компонент, который может быть строкой, представляющей элемент HTML или функциональный компонент.
Объект с любыми пропсами, который вы хотите передать
Остальные являются дочерними компонентами, такими как текстовые строки или другие элементы.

Если вам надоело постоянно вводить React.createElement(), один из распространенных шаблонов — назначить сокращение:

const e = React.createElement;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(e('div', null, 'Hello World'));

Затем, если вы предпочитаете этот стиль, он может быть таким же удобным, как и JSX.

React Туториал по React Frontend

на русском языке
бесплатно
без VPN

ChatGPT