Импорт и экспорт React компонентов

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

Файл корневого компонента

В части "Пишем первый React компонент" мы создали компонент Profile и компонент Gallery , который его отображает:

function Profile() {
  return <img src="https://example.com/userpic.jpg" alt="User Name" />;
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

В настоящее время они находятся в корневом файле компонента, который в этом примере называется App.js. В Create React App ваше приложение находится в src/App.js. Однако в зависимости от вашей настройки ваш корневой компонент может находиться в другом файле. Если вы используете фреймворк с файловой маршрутизацией, например Next.js, ваш корневой компонент будет разным для каждой страницы.

Экспорт и импорт компонента

Что, если в будущем вы захотите изменить посадочную страницу и разместить там список научных книг? Или разместить все профили в другом месте? Имеет смысл переместить Gallery и Profile из корневого файла компонента. Это сделает их более модульными и позволит повторно использовать их в других файлах. Вы можете переместить компонент в три шага:

1. Создайте новый файл JS, чтобы поместить в него компоненты.
2. Экспортируйте компонент из этого файла (используя экспорт по умолчанию или именованный экспорт).
3. Импортируйте его в файл, в котором вы будете использовать компонент (используя соответствующую технику для импорта по умолчанию или именованного экспорта).

Здесь и Profile, и Gallery были перемещены из App.js в новый файл с именем Gallery.js. Теперь вы можете изменить App.js, чтобы импортировать галерею из Gallery.js:

// App.js

import Gallery from './Gallery.js';

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

// Gallery.js

function Profile() {
  return <img src="https://example.com/userpic.jpg" alt="User Name" />;
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Обратите внимание, как этот пример теперь разбит на два файла компонентов:

1. Gallery.js:
   • Определяет компонент профиля, который используется только в том же файле и не экспортируется.
   • Экспортирует компонент Gallery в качестве экспорта по умолчанию.
2. App.js:
   • Импортирует Gallery по умолчанию из Gallery.js.
   • Экспортирует корневой компонент App в качестве экспорта по умолчанию.

Вы можете столкнуться с файлами, в которых отсутствует расширение .js, например:

import Gallery from './Gallery';

И './Gallery.js', и './Gallery' будут работать с React, хотя первое ближе к тому, как работают нативные модули ES.

Экспорт по умолчанию и именованный экспорт

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

Синтаксис	Ээкспортирование	Импортрирование
по умолчанию	export default function Button() {}	import Button from './button.js';
именованный	export function Button() {}	import { Button } from './button.js';

Когда вы пишете импорт по умолчанию, вы можете указать любое имя после импорта. Например, вместо этого вы можете написать import Banana from './button.js', и он все равно предоставит вам тот же экспорт по умолчанию. Напротив, при именованном импорте имя должно совпадать с обеих сторон. Вот почему они называются именованным импортом. Люди часто используют экспорт по умолчанию, если файл экспортирует только один компонент, и используют именованный экспорт, если он экспортирует несколько компонентов и значений. Независимо от того, какой стиль вы предпочитаете, всегда давайте осмысленные имена функциям компонентов и файлам, которые их содержат. Компоненты без имен, такие как export default() => {}, не рекомендуются, поскольку они усложняют отладку.

Экспорт и импорт нескольких компонентов из одного файла

Что, если вы хотите показать только один Profile вместо галереи? Вы также можете экспортировать компонент Profile. Но в Gallery.js уже есть экспорт по умолчанию, и у вас не может быть двух экспортов по умолчанию. Вы можете создать новый файл с экспортом по умолчанию или добавить именованный экспорт для Profile. Файл может иметь только один экспорт по умолчанию, но он может иметь множество именованных экспортов. Чтобы уменьшить возможную путаницу между экспортом по умолчанию и именованным экспортом, некоторые команды предпочитают придерживаться только одного стиля (по умолчанию или именованного) или избегать их смешивания в одном файле. Это вопрос предпочтений. Делайте то, что лучше всего работает для вас. Сначала экспортируйте Profile из Gallery.js, используя именованный экспорт (без ключевого слова default ):

export function Profile() {
  // ...
}

Затем импортируйте Profile из Gallery.js в App.js, используя именованный импорт (с фигурными скобками):

import { Profile } from './Gallery.js';

Наконец, отобразите <Profile /> из компонента App:

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

Теперь Gallery.js содержит два экспорта: экспорт Gallery по умолчанию и именованный экспорт Profile. App.js импортирует их оба.

// App.js

import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';

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

// Gallery.js

export function Profile() {
  return <img src="https://example.com/userpic.jpg" alt="User Name" />;
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Теперь вы используете сочетание экспорта по умолчанию и именованного экспорта:

• Gallery.js:
  • Экспортирует компонент Profile как именованный экспорт с именем Profile.
  • Экспортирует компонент Gallery в качестве экспорта по умолчанию.
• App.js:
  • Импортирует Profile как именованный импорт с именем Profile из Gallery.js.
  • Импортирует Gallery как импорт по умолчанию из Gallery.js.
  • Экспортирует корневой компонент App в качестве экспорта по умолчанию.

Резюме

На этой странице вы узнали:

• Что такое файл корневого компонента
• Как импортировать и экспортировать компонент
• Когда и как использовать именованный импорт и экспорт; и импорт и экспорт по умолчанию
• Как экспортировать несколько компонентов из одного файла

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

Поднятие состояния на примере

В этом примере родительский компонент Accordion отображает две отдельные панели:

• Accordion
  • Panel
  • Panel

Каждый компонент Panel имеет булевское состояние isActive, которое определяет, видимо ли его содержимое.

import { useState } from 'react';

function Panel({ title, children }) {
  const [isActive, setIsActive] = useState(false);
  return (
    <section className="panel">
      <h3>{title}</h3>
      {isActive ? (
        <p>{children}</p>
      ) : (
        <button onClick={() => setIsActive(true)}>Show</button>
      )}
    </section>
  );
}

export default function Accordion() {
  return (
    <>
      <h2>Almaty, Kazakhstan</h2>
      <Panel title="About">
        With a population of about 2 million, Almaty is Kazakhstan's largest
        city. From 1929 to 1997, it was its capital city.
      </Panel>
      <Panel title="Etymology">
        The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for
        "apple" and is often translated as "full of apples". In fact, the region
        surrounding Almaty is thought to be the ancestral home of the apple, and
        the wild <i lang="la">Malus sieversii</i> is considered a likely
        candidate for the ancestor of the modern domestic apple.
      </Panel>
    </>
  );
}

Обратите внимание, что нажатие кнопки одной панели не влияет на другую панель — они независимы. Но теперь предположим, что вы хотите изменить его так, чтобы в любой момент времени раскрывалась только одна панель. При таком дизайне расширение второй панели должно привести к сворачиванию первой. Как бы Вы это сделали? Чтобы согласовать эти две панели, вам нужно «поднять их состояние» до родительского компонента в три шага:

1. Удалить состояние из дочерних компонентов.
2. Передать захардкоженные данные от общего родителя.
3. Добавить состояние к общему родителю и передать его вместе с обработчиками событий.

Это позволит компоненту Accordion координировать обе панели и разворачивать только одну за раз.

Шаг 1: Удалить состояние из дочерних компонентов

Вы передадите контроль над isActive панели ее родительскому компоненту. Это означает, что вместо этого родительский компонент будет передавать isActive в Panel в качестве пропса. Начните с удаления этой строки из компонента Panel:

const [isActive, setIsActive] = useState(false);

Вместо этого добавьте isActive в список пропсов Panel:

function Panel({ title, children, isActive }) {

Теперь родительский компонент компонента Panel может управлять isActive, передавая его как проп. И наоборот, компонент Panel теперь не имеет контроля над значением isActive — теперь это зависит от родительского компонента.

Шаг 2. Передать захардкоженные данные от общего родителя

Чтобы поднять состояние, вы должны найти ближайший общий родительский компонент обоих дочерних компонентов, которые вы хотите скоординировать:

• Accordion (ближайший общий родитель)
  • Panel
  • Panel

В данном примере это компонент Accordion. Поскольку он находится над обеими панелями и может управлять их пропсами, он станет «источником правды» для той панели, которая в данный момент активна. Заставим компонент Accordion передавать жестко заданное значение isActive (например, true) на обе панели:

import { useState } from 'react';

export default function Accordion() {
  return (
    <>
      <h2>Almaty, Kazakhstan</h2>
      <Panel title="About" isActive={true}>
        With a population of about 2 million, Almaty is Kazakhstan's largest
        city. From 1929 to 1997, it was its capital city.
      </Panel>
      <Panel title="Etymology" isActive={true}>
        The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for
        "apple" and is often translated as "full of apples". In fact, the region
        surrounding Almaty is thought to be the ancestral home of the apple, and
        the wild <i lang="la">Malus sieversii</i> is considered a likely
        candidate for the ancestor of the modern domestic apple.
      </Panel>
    </>
  );
}

function Panel({ title, children, isActive }) {
  return (
    <section className="panel">
      <h3>{title}</h3>
      {isActive ? (
        <p>{children}</p>
      ) : (
        <button onClick={() => setIsActive(true)}>Show</button>
      )}
    </section>
  );
}

Шаг 3: Добавить состояние к общему родителю

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

const [activeIndex, setActiveIndex] = useState(0);

Когда activeIndex равен 0, активна первая панель, а когда 1 — вторая. При нажатии кнопки «Показать» на любой из панелей необходимо изменить активный индекс в Accordion. Panel не может установить состояние activeIndex напрямую, потому что оно определено внутри Accordion. Компонент Accordion должен явно разрешить компоненту Panel изменять свое состояние, передав обработчик событий в качестве пропса:

<>
  <Panel isActive={activeIndex === 0} onShow={() => setActiveIndex(0)}>
    ...
  </Panel>
  <Panel isActive={activeIndex === 1} onShow={() => setActiveIndex(1)}>
    ...
  </Panel>
</>

<button> внутри Panel теперь будет использовать проп onShow в качестве обработчика события click:

import { useState } from 'react';

export default function Accordion() {
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <>
      <h2>Almaty, Kazakhstan</h2>
      <Panel
        title="About"
        isActive={activeIndex === 0}
        onShow={() => setActiveIndex(0)}
      >
        With a population of about 2 million, Almaty is Kazakhstan's largest
        city. From 1929 to 1997, it was its capital city.
      </Panel>
      <Panel
        title="Etymology"
        isActive={activeIndex === 1}
        onShow={() => setActiveIndex(1)}
      >
        The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for
        "apple" and is often translated as "full of apples". In fact, the region
        surrounding Almaty is thought to be the ancestral home of the apple, and
        the wild <i lang="la">Malus sieversii</i> is considered a likely
        candidate for the ancestor of the modern domestic apple.
      </Panel>
    </>
  );
}

function Panel({ title, children, isActive, onShow }) {
  return (
    <section className="panel">
      <h3>{title}</h3>
      {isActive ? <p>{children}</p> : <button onClick={onShow}>Show</button>}
    </section>
  );
}

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

Управляемые и неуправляемые компоненты

Обычно компонент с некоторым локальным состоянием называют "неуправляемым". Например, исходный компонент Panel с переменной состояния isActive не контролируется, поскольку его родитель не может влиять на то, активна панель или нет. Напротив, вы можете сказать, что компонент "управляется", когда важная информация в нем управляется пропсами, а не его собственным локальным состоянием. Это позволяет родительскому компоненту полностью определять свое поведение. Последний компонент Panel с пропсом isActive управляется компонентом Accordion. Неуправляемые компоненты проще использовать в своих родительских компонентах, поскольку они требуют меньшей настройки. Но они менее гибкие, когда вы хотите скоординировать их вместе. Управляемые компоненты максимально гибкие, но требуют от родительских компонентов полной настройки их пропсами. На практике «управляемый» и «неуправляемый» не являются строгими техническими терминами — каждый компонент обычно имеет некоторое сочетание локального состояния и свойств. Тем не менее, это полезный способ рассказать о том, как устроены компоненты и какие возможности они предлагают. При написании компонента учитывайте, какая информация в нем должна управляться (через пропсы), а какая информация не должна управляться (через состояние). Но вы всегда можете передумать и провести рефакторинг позже.

Единый источник правды для каждого состояния

В React приложении многие компоненты будут иметь собственное состояние. Некоторое состояние может «жить» рядом с компонентами-листьями (компонентами в нижней части дерева), такими как инпуты (<input />). Другое состояние может «жить» ближе к верху приложения. Например, даже клиентские библиотеки маршрутизации обычно реализуются путем сохранения текущего маршрута в состоянии React и передачи его в пропсах Для каждой уникальной части состояния вы выберете компонент, который «владеет» им. Этот принцип также известен как наличие «единого источника истины». Это не означает, что все состояния хранятся в одном месте, но для каждой части состояния существует определенный компонент, который содержит эту часть информации. Вместо того, чтобы дублировать общее состояние между компонентами, вы поднимете его до их общего родителя и передадите его дочерним элементам, которым оно нужно. Ваше приложение будет меняться по мере того, как вы будете над ним работать. Обычно вы перемещаете состояние вниз или назад, пока вы все еще выясняете, где «живет» каждая часть состояния. Это все часть процесса. Чтобы увидеть, как это выглядит на практике с еще несколькими компонентами, прочитайте статью Мышление в стиле React.

Резюме

• Если вы хотите скоординировать два компонента, переместите их состояние в их общий родитель.
• Затем передайте информацию через пропсы от их общего родителя.
• Наконец, передайте обработчики событий, чтобы потомки могли изменить состояние родителя.
• Полезно рассматривать компоненты как «управляемые» (управляемые пропсами) или «неуправляемые» (управляемые состоянием).
• Таким образом можно выделить такие случаи передачи данных в React:
  • от родительского компонента к дочернему;
  • от дочернего компонента к родительскому;
  • между соседними компонентами;
  • от компонента к компоненту-потомку (через несколько уровней вниз);
  • от компонента к компоненту-предку (через несколько уровней вверх).

Подробный разбор этих случаев с примерами вы можете найти в статье Как передавать данные между компонентами в ReactJS.