Вывучэнне React
Апісанне UI

Імпартаванне і экспартаванне кампанентаў

Магіяй кампанентаў з’яўляецца іх гатоўнасць да паўторнага выкарыстання: вы можаце стварыць кампанент, які будзе змяшчаць у сабе іншыя кампаненты. Але з павелічэннем колькасці ўкладзеных кампанентаў, часта з’яўляецца і патрэба ў разбіванні кампанентаў па ўласных файлах. Гэта дазваляе захоўваць вашы файлы прасцейшымі для разумення, а кампаненты прасцейшымі для паўторнага выкарыстання.

You will learn

  • Што такое файл каранёвага кампанента
  • Як імпартаваць і экспартаваць кампаненты
  • Калі выкарыстоўваць прадвызначанае імпартаванне і экспартаванне, а калі найменнае.
  • Як імпартаваць і экспартаваць некалькі кампанентаў з аднаго файла
  • Як падзяліць кампанент на некалькі файлаў

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

На старонцы «Ваш першы кампанент», вы стварылі кампаненты Profile і Gallery, яны выглядаюць наступным чынам:

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Кэтрын Джонсан"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Выбітныя навукоўцы</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

У дадзеным прыкладзе ўсе кампаненты існуюць у файле каранёвага кампанента, які называецца App.js. У залежнасці ад вашага асяроддзя, каранёвы кампанент можа змяшчацца і ў іншым файле. Калі вы выкарыстоўваеце фрэймворк з маршрутызацыяй, што базуецца на файлавай сістэме, (напрыклад, Next.js), ваш каранёвы кампанент будзе розным для кожнай старонкі.

Экспартаванне і імпартаванне кампанентаў

Што калі вы захочаце змяніць старонку ў будучыні, дадаўшы сюды спіс навуковых кніг? Ці перамясціўшы профілі куды-небудзь яшчэ? Тады з’яўляецца сэнс вынесці Gallery і Profile з файла каранёвага кампанента. Гэта зробіць іх модульнымі і прыдатнымі для паўторнага выкарыстання ў іншых файлах. Каб вынесці кампанент, трэба выканаць наступныя крокі:

  1. Стварыце новы JS файл, куды вы складзяце кампанент.
  2. Экспартуйце вашую функцыю з гэтага файла (Выкарыстоўваючы прадвызначанае або найменнае імпартаванне).
  3. Імпартуйце кампанент у файл, дзе вы хочаце яго выкарыстоўваць (адпаведна выкарыстоўваючы прадвызначанае або найменнае імпартаванне, у залежнасці ад таго, як вы экспартуеце свой кампанент).

У дадзеным прыкладзе Profile і Gallery былі вынесеныя з App.js у асобны файл Gallery.js. Цяпер вы можаце змяніць App.js, каб імпартаваць Gallery з файла Gallery.js:

import Gallery from './Gallery.js';

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

Заўважце якім чынам цяпер код у дадзеным прыкладзе разбіты на два файлы з кампанентамі:

  1. Gallery.js:
    • Вызначае кампанент Profile, які выкарыстоўваецца толькі ў межах файла, таму не экспартуецца.
    • Экспартуе кампанент Gallery, выкарыстоўваючы прадвызначанае экспартаванне.
  2. App.js:
    • Імпартуе Gallery выкарыстоўваючы прадвызначанае імпартаванне з файла Gallery.js.
    • Экспартуе каранёвы кампанент App, выкарыстоўваючы прадвызначанае экспартаванне.

Note

Вы таксама можаце сутыкнуцца з выпадкамі, калі ў назве файла прапушчана частка .js:

import Gallery from './Gallery';

Абодва варыянты: './Gallery.js' і './Gallery' будуць працаваць у React, хай і першы варыянт бліжэйшы да таго, як працуюць натыўныя ES модулі.

Deep Dive

Розніца паміж прадвызначаным і найменным экспартаваннем

У JavaScript ёсць два асноўных спосабы экспартавання: прадвызначанае экспартаванне і найменнае экспартаванне. У нашых прыкладах дагэтуль выкарыстоўвалася толькі прадвызначанае экспартаванне. Але вы можаце выкарыстоўваць любы з іх ці адразу некалькі ў межах аднаго файла. Адзін файл можа выкарыстоўваць прадвызначанае экспартаванне не болей за адзін раз, але найменныя экспартаванні можна выкарыстоўваць колькі хочаце разоў.

Прадвызначанае і найменныя спосабы экспартавання

Ад таго, як вы экспартуеце кампанент, залежыць тое, як вам давядзецца яго імпартаваць. Вы атрымаеце памылку, калі паспрабуеце імпартаваць прадвызначана экспартаваны кампанент такім жа чынам, якім трэба імпартаваць найменна экспартаваныя кампаненты! Гэтая табліца дапаможа вам не блытацца:

СінтаксісАператар экспартаванняАператар імпартавання
Прадвызначанаеexport default function Button() {}import Button from './Button.js';
Найменнаеexport function Button() {}import { Button } from './Button.js';

Калі вы выкарыстоўваеце прадвызначанае імпартаванне, вы можаце выкарыстоўваць любую назву ў import. Напрыклад, вы можаце напісаць import Banana from './Button.js' і атрымаць усё той жа прадвызначана экспартаваны кампанент. Гэтаму супрацьпастаўляюцца найменныя імпартаванні: пры іх назва павінна супадаць у абодвух файлах. Таму яны і называюцца найменнымі!

Звычайна людзі выкарыстоўваць прадвызначанае экспартаванне, калі файл экспартуе толькі адзін кампанент, і найменныя экспартаванні, калі файл экспартуе некалькі кампанентаў. Незалежна ад таго, якому стылю напісання кода вы аддаяце перавагу, заўсёды называйце кампаненты і іх файлы асэнсавана. Кампаненты без назваў, такія як export default () => {}, выкарыстоўваць не варта, бо яны ўскладняюць працэс адладжвання.

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

Што калі вы хочаце паказваць адзін Profile замест галерэі? Вы можаце экспартаваць кампанент Profile таксама. Але Gallery.js ужо мае прадвызначанае экспартаванне, і вы не можаце скарыстацца прадвызначаным экспартаваннем двойчы. Вы можаце стварыць новы файл з прадвызначаным экспартаваннем, але таксама вы можаце дадаць найменнае экспартаванне для Profile. Адзін файл можа мець толькі адное прадвызначанае экспартаванне, але любую колькасць найменных экспартаванняў!

Note

Каб пазбавіцца патэнцыйнай блытаніны праз розныя варыянты экспартавання, некаторыя людзі, асабліва хто працуюць у камандзе, карыстаюцца толькі адным стылем экспартавання (прадвызначаным або найменным) ці прынамсі пазбягаюць выкарыстання іх разам у межах аднаго файла. Рабіце тое, што вам падыдзе найлепш!

Спачатку, экспартуйце 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 імпартуе іх разам. Паспрабуйце замяніць <Profile /> на <Gallery /> і назад у наступным прыкладзе:

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

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

Цяпер вы выкарыстоўваеце адразу прадвызначанае і найменнае экспартаванні:

  • Gallery.js:
    • Экспартуе кампанент Profile, выкарыстоўваючы найменны экспарт, экспартаваны кампанент мае назву Profile.
    • Экспартуе кампанент Gallery, выкарыстоўваючы прадвызначанае экспартаванне.
  • App.js:
    • Імпартуе кампанент Profile, выкарыстоўваючы найменнае імпартаванне, пад назвай Profile з Gallery.js.
    • Імпартуе Gallery, выкарыстоўваючы прадвызначанае экспартаванне, з Gallery.js.
    • Экспартуе каранёвы кампаненты App, выкарыстоўваючы прадвызначанае экспартаванне.

Recap

На гэтай старонцы вы вывучылі:

  • Што такое файл каранёвага кампанента
  • Як імпартаваць і экспартаваць кампаненты
  • Калі і як выкарыстоўваць прадвызначанае імпартаванне і экспартаванне, а калі найменнае.
  • Як экспартаваць некалькі кампанентаў з аднаго файла

Try out some challenges

Challenge 1 of 1:
Працягніце разбіванне кампанентаў

На дадзены момант Gallery.js экспартуе абодва кампаненты: Profile і Gallery, што можа блытаць.

Перанясіце кампанент Profile ва ўласны файл Profile.js, затым змяніце кампанент App, каб ён рэндэрыў абодва кампаненты: <Profile /> і <Gallery /> адзін пасля іншага.

Вы можаце выкарыстоўваць для кампанента Profile любы стыль экспартавання: прадвызначаны або найменны, але не забудзьцеся пераканацца, што выкарыстоўваеце адпаведны сінтаксіс у абодвух файлах: App.js і Gallery.js! Звярніцеся да табліцы для прасцейшага разумення:

СінтаксісАператар экспартуАператар імпарту
Defaultexport default function Button() {}import Button from './Button.js';
Найменнаеexport function Button() {}import { Button } from './Button.js';
// Move me to Profile.js!
export function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Выбітныя навукоўцы</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Як толькі ў вас атрымаецца зрабіць гэта з дапамогай аднаго са стыляў экспартавання, паспрабуйце зрабіць тое ж самае, выкарыстоўваючы іншы стыль.

PreviousВаш першы кампанент
NextНапісанне разметкі з JSX