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

Пишем первый React компонент

год назад·4 мин. на чтение

Компоненты — одна из основных концепций React. Они являются основой, на которой вы строите пользовательские интерфейсы (UI), что делает их идеальным местом для начала вашего пути к React.

Содержание туториала по React Компоненты — одна из основных концепций React. Они являются основой, на которой вы строите пользовательские интерфейсы (UI), что делает их идеальным местом для начала вашего пути к React.

Компоненты: строительные блоки пользовательского интерфейса

В Интернете HTML позволяет нам создавать богато структурированные документы с помощью встроенного набора тегов, таких как <h1> и <li>: 
<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>
 Эта разметка представляет эту статью <article>, ее заголовок <h1> и (сокращенное) оглавление в виде упорядоченного списка <ol>. Подобная разметка в сочетании с CSS для стилизации и JavaScript для интерактивности лежит в основе каждой боковой панели, аватара, модального окна, раскрывающегося списка — каждой части пользовательского интерфейса, которую вы видите в Интернете. React позволяет комбинировать разметку, CSS и JavaScript в кастомные «компоненты», повторно используемые элементы пользовательского интерфейса для вашего приложения. Код оглавления, который вы видели выше, можно превратить в компонент <TableOfContents />, который можно отображать на каждой странице. Внутри он по-прежнему использует те же HTML-теги, такие как <article>, <h1> и т. д. Как и в случае с HTML-тегами, вы можете составлять, упорядочивать и размещать компоненты для оформления целых страниц. Например, страница документации, которая состоит из компонентов React, может выглядеть следующим образом: 
<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>
По мере роста вашего проекта вы заметите, что многие из ваших проектов могут быть составлены путем повторного использования уже написанных вами компонентов, что ускоряет разработку. Оглавление выше можно добавить на любой экран с помощью <TableOfContents />. Вы даже можете запустить свой проект, состоящий из компонентов, которыми поделились участники сообщества React с открытым исходным кодом, такими как Chakra UI и Material UI.

Определение компонента

Традиционно при создании веб-страниц веб-разработчики размечали свой контент, а затем добавляли интерактивность, добавляя немного JavaScript. React ставит интерактивность на первое место, но при этом использует ту же технологию: компонент React — это функция JavaScript, в которую вы можете добавить разметку. Вот как это выглядит: 
export default function Profile() {
  return <img src="https://example.com/userpic.jpg" alt="User Name" />;
}
Вот как написать компонент:

Шаг 1: Экспортируйте компонент

Префикс export default — это стандартный синтаксис JavaScript (не относящийся к React). Он позволяет пометить основную функцию в файле, чтобы впоследствии можно было импортировать ее из других файлов. Подробнее об импорте смотрите в разделе Импорт и экспорт компонентов.

Шаг 2: Определите функцию

С помощью функции function Profile() { } вы определяете функцию JavaScript с именем Profile. Компоненты React — это обычные функции JavaScript, но их имена должны начинаться с заглавной буквы, иначе они не будут работать.

Шаг 3: Добавьте разметку

Компонент возвращает тег <img /> с атрибутами src и alt. <img /> написан как HTML, но на самом деле это JavaScript. Этот синтаксис называется JSX, и он позволяет встраивать разметку в JavaScript. Но если ваша разметка не находится на той же строке, что и ключевое слово return, вы должны заключить ее в пару круглых скобок, например: 
export default function Profile() {
  return (
    <div>
      <img src="https://example.com/userpic.jpg" alt="User Name" />
    </div>
  );
}

Использование компонента

Теперь, когда вы определили свой компонент Profile, вы можете вложить его в другие компоненты. Например, вы можете экспортировать компонент Gallery, который использует несколько компонентов Profile: 
export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Что видит браузер

Обратите внимание на разницу в регистрах:
  • <section> пишется строчными буквами, поэтому React знает, что мы ссылаемся на HTML-тег.
  • <Profile/> начинается с заглавной P, поэтому React знает, что мы хотим использовать наш компонент с именем Profile.
А Profile содержит еще больше HTML: <img />. В итоге вот что видит браузер: 
<section>
  <h1>Amazing scientists</h1>
  <img src="https://example.com/userpic.jpg" alt="User Name" />
  <img src="https://example.com/userpic.jpg" alt="User Name" />
  <img src="https://example.com/userpic.jpg" alt="User Name" />
</section>

Вложение и организация компонентов

Компоненты — это обычные функции JavaScript, поэтому вы можете хранить несколько компонентов в одном файле. Это удобно, когда компоненты относительно малы или тесно связаны друг с другом. Если этот файл переполнен, вы всегда можете переместить Profile в отдельный файл. Как это сделать, вы узнаете вскоре на странице об импорте. Поскольку компоненты Profile визуализируются внутри Gallery — даже несколько раз — мы можем сказать, что Gallery является родительским компонентом, отображающим каждый Profile как «дочерний». Это часть магии React: вы можете определить компонент один раз, а затем использовать его в любом месте и столько раз, сколько захотите. Компоненты могут отображать другие компоненты, но вы никогда не должны вкладывать их определения: 
export default function Gallery() {
  // Никогда не определяйте компонент внутри другого
  function Profile() {
    // ...
  }
  // ...
}
Фрагмент выше очень медленный и вызывает ошибки. Вместо этого определите каждый компонент на верхнем уровне: 
export default function Gallery() {
  // ...
}

// ✅ Определите компонент на корневом уровне
function Profile() {
  // ...
}
Когда дочернему компоненту нужны данные от родителя, передайте их пропсами, а не определениями вложенности.

Резюме

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

Доступ к данным через рефы в React

год назад·6 мин. на чтение

Если вы хотите, чтобы React компонент «запоминал» некоторую информацию, но вы не хотите, чтобы эта информация запускала новые рендеры, вы можете использовать ref (рефы)

Содержание туториала по React Если вы хотите, чтобы компонент «запоминал» некоторую информацию, но вы не хотите, чтобы эта информация запускала новые рендеры, вы можете использовать ref (рефы).

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

Вы можете добавить реф в свой компонент, импортировав хук useRef из React: 
import { useRef } from 'react';
Внутри вашего компонента вызовите хук useRef и передайте начальное значение, на которое вы хотите сослаться, в качестве единственного аргумента. Например, вот ссылка на значение 0: 
const ref = useRef(0);
useRef возвращает такой объект: 
{
  current: 0; // Значение, отправленное в useRef
}
Вы можете получить доступ к текущему значению этого рефа через свойство ref.current. Это значение является изменяемым, то есть вы можете как читать, так и писать в него. Это как секретный карман вашего компонента, который React не отслеживает. (Вот что делает его лозейкой из одностороннего потока данных React — подробнее об этом ниже) В примере ниже кнопка будет увеличивать ref.current при каждом нажатии: 
import { useRef } from 'react';

export default function Counter() {
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1;
    alert('You clicked ' + ref.current + ' times!');
  }

  return <button onClick={handleClick}>Click me!</button>;
}
Реф указывает на число, но, как и состояние, вы можете указать что угодно: строку, объект или даже функцию. В отличие от состояния, ref — это простой объект JavaScript со свойством current, которое вы можете читать и изменять. Обратите внимание, что компонент не перерисовывается при очередном инкременте. Как и состояние, React сохраняет рефы между повторными рендерингами. Однако установка состояния повторно рендерит компонент. А изменение рефа - нет.

Пример: создание секундомера

Вы можете комбинировать рефы и состояние в одном компоненте. Например, давайте создадим секундомер, который пользователь может запускать или останавливать нажатием кнопки. Чтобы отобразить, сколько времени прошло с тех пор, как пользователь нажал «Старт», вам нужно будет отслеживать, когда была нажата кнопка «Старт» и какое сейчас время. Эта информация используется для рендеринга, поэтому вы сохраните ее в состоянии: 
const [startTime, setStartTime] = useState(null);
const [now, setNow] = useState(null);
Когда пользователь нажимает «Старт», вы будете использовать setInterval для обновления времени каждые 10 миллисекунд: 
import { useState } from 'react';

export default function Stopwatch() {
  const [startTime, setStartTime] = useState(null);
  const [now, setNow] = useState(null);

  function handleStart() {
    // Начало отсчета
    setStartTime(Date.now());
    setNow(Date.now());

    setInterval(() => {
      // Обновление текущего времени каждые 10 мс
      setNow(Date.now());
    }, 10);
  }

  let secondsPassed = 0;
  if (startTime != null && now != null) {
    secondsPassed = (now - startTime) / 1000;
  }

  return (
    <>
      <h1>Time passed: {secondsPassed.toFixed(3)}</h1>
      <button onClick={handleStart}>Start</button>
    </>
  );
}
 При нажатии кнопки «Стоп» нужно отменить существующий интервал, чтобы он перестал обновлять переменную состояния now. Вы можете сделать это, вызвав clearInterval, но вам нужно указать идентификатор интервала, который ранее возвращался вызовом setInterval, когда пользователь нажимал «Старт». Вам нужно где-то хранить идентификатор интервала. Поскольку идентификатор интервала не используется для рендеринга, вы можете сохранить его в рефе: 
import { useState, useRef } from 'react';

export default function Stopwatch() {
  const [startTime, setStartTime] = useState(null);
  const [now, setNow] = useState(null);
  const intervalRef = useRef(null);

  function handleStart() {
    setStartTime(Date.now());
    setNow(Date.now());

    clearInterval(intervalRef.current);
    intervalRef.current = setInterval(() => {
      setNow(Date.now());
    }, 10);
  }

  function handleStop() {
    clearInterval(intervalRef.current);
  }

  let secondsPassed = 0;
  if (startTime != null && now != null) {
    secondsPassed = (now - startTime) / 1000;
  }

  return (
    <>
      <h1>Time passed: {secondsPassed.toFixed(3)}</h1>
      <button onClick={handleStart}>Start</button>
      <button onClick={handleStop}>Stop</button>
    </>
  );
}
Когда информация используется для рендеринга - держите ее в состоянии. Когда информации нужна только обработчикам событий и ее изменение не требует повторного рендеринга - использование ссылки может быть более эффективным.

Различия между рефами и состоянием

Возможно, вы думаете, что рефы кажутся менее «строгими», чем состояние. Например, вы можете изменить их вместо того, чтобы постоянно использовать функцию установки состояния. Но в большинстве случаев вы захотите использовать состояние. Рефы — это лозейка, которая вам часто не потреюуется. Сравним состояние и рефы:
РефыСостояние
useRef(initialValue) возвращает { current: initialValue }useState(initialValue) возвращает текущее значение переменной состояния и функцию установки состояния ([value, setValue])
Не запускает повторный рендеринг при его изменении.Запускает повторный рендеринг при его изменении.
Изменяемый — вы можете изменять и обновлять значение current вне процесса рендеринга.Неизменный (иммутабельный) — вы должны использовать функцию установки состояния, чтобы изменить переменные состояния, чтобы поставить в очередь повторный рендеринг.
Вы не должны читать (или записывать) значение current во время рендеринга.Вы можете прочитать состояние в любое время. Однако каждый рендер имеет свой собственный снимок состояния, который не меняется.
Вот кнопка-счетчик, реализованная с состоянием: 
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>You clicked {count} times</button>;
}
Поскольку отображается значение count, имеет смысл использовать для него значение состояния. Когда значение счетчика устанавливается с помощью setCount(), React повторно отображает компонент, и экран обновляется, чтобы отразить новое значение счетчика. Если вы попытаетесь реализовать это с помощью ref, React никогда не будет повторно отображать компонент, поэтому вы никогда не увидите изменения счетчика. Посмотрите, как нажатие на эту кнопку не обновляет ее текст: 
import { useRef } from 'react';

export default function Counter() {
  let countRef = useRef(0);

  function handleClick() {
    // В таком случае ререндеринг компонента Не происходит
    countRef.current = countRef.current + 1;
  }

  return (
    <button onClick={handleClick}>You clicked {countRef.current} times</button>
  );
}
Вот почему чтение ref.current во время рендеринга приводит к ненадежному коду. Если вам это нужно, используйте вместо этого состояние.

Как работает useRef внутри?

Хотя и useState, и useRef предоставляются React, в принципе useRef может быть реализован поверх useState. Вы можете представить, что внутри React useRef реализован так: 
// Внутри React
function useRef(initialValue) {
  const [ref, unused] = useState({ current: initialValue });
  return ref;
}
Во время первого рендеринга useRef возвращает { current: initialValue }. Этот объект хранится в React, поэтому при следующем рендеринге будет возвращен тот же объект. Обратите внимание, что в этом примере не используется установщик состояния. В этом нет необходимости, потому что useRef всегда должен возвращать один и тот же объект. React предоставляет встроенную версию useRef, потому что она достаточно распространена на практике. Но вы можете думать об этом как об обычной переменной состояния без сеттера. Если вы знакомы с объектно-ориентированным программированием, рефы могут напомнить вам поля экземпляра, но вместо this.something вы пишете somethingRef.current.

Когда использовать рефы?

Как правило, вы будете использовать рефы, когда вашему компоненту нужно «выйти за пределы» React и взаимодействовать с внешними API — часто API браузера, который не повлияет на внешний вид компонента. Вот несколько таких редких ситуаций:
  • Хранение других объектов, которые не нужны для вычисления JSX.
Если вашему компоненту нужно хранить какое-то значение, но это не влияет на логику рендеринга, выбирайте реф.

Рекомендации по использованию рефов

Следование этим принципам сделает ваши компоненты более предсказуемыми:
  • Относитесь к рефам как к лозейке. Рефы полезны при работе с внешними системами или API-интерфейсами браузера. Если большая часть логики вашего приложения и потока данных зависит от рефов, возможно, следует пересмотреть свой подход.
  • Не читайте и не записывайте ref.current во время рендеринга. Если во время рендеринга требуется некоторая информация, используйте вместо этого состояние. Поскольку React не знает, когда изменяется ref.current, даже его чтение во время рендеринга затрудняет прогнозирование поведения вашего компонента. (Единственным исключением является такой код, как if (!ref.current) ref.current = new Thing(), который устанавливает ссылку только один раз во время первого рендеринга.)
Ограничения состояния React не распространяются на ссылки. Например, состояние действует как снимок для каждого рендеринга и не обновляется синхронно. Но когда вы изменяете текущее значение ref, оно немедленно меняется: 
ref.current = 5;
console.log(ref.current); // 5
Это связано с тем, что сам реф является обычным JavaScript объектом и ведет себя как объект. Вам также не нужно беспокоиться о том, чтобы избежать мутации, когда вы работаете с рефами. Пока объект, который вы мутируете, не используется для рендеринга, React не волнует, что вы делаете с рефом или его содержимым.

Рефы и DOM

Вы можете указать ссылку на любое значение. Однако наиболее распространенным вариантом использования ссылки является доступ к элементу DOM. Например, это удобно, если вы хотите сфокусировать инпут программно. Когда вы передаете реф в атрибут ref в JSX, например <div ref={myRef}>, React поместит соответствующий элемент DOM в myRef.current.

Резюме

  • Рефы — это лозейка для хранения значений, которые не используются для рендеринга. Вы не будете нуждаться в них часто.
  • Ссылка — это простой объект JavaScript с одним свойством, называемым current, которое вы можете прочитать или установить.
  • Вы можете попросить React дать вам реф, вызвав хук useRef.
  • Как и состояние, рефы позволяют сохранять информацию между повторными рендерингами компонента.
  • В отличие от состояния, установка значения current рефа не вызывает повторный рендеринг.
  • Не читайте и не записывайте ref.current во время рендеринга. Это затрудняет прогнозирование вашего компонента.
FrontendReactТуториал по React
logo

itdevjournal