Сохранение и сброс состояния в React
год назад·11 мин. на чтение
Состояние изолировано между компонентами. React отслеживает, какое состояние принадлежит какому компоненту, основываясь на их месте в UI дереве. Вы можете контролировать, когда сохранять состояние и когда сбрасывать его между повторными рендерингами.
Содержание туториала по React
Состояние изолировано между компонентами. React отслеживает, какое состояние принадлежит какому компоненту, основываясь на их месте в UI дереве. Вы можете контролировать, когда сохранять состояние и когда сбрасывать его между повторными рендерингами.
Как видите, при обновлении одного счетчика обновляется только состояние этого компонента:
Здесь вы переключаетесь между различными типами компонентов в одной и той же позиции. Изначально первый дочерний элемент
Дерево пользовательского интерфейса
Браузеры используют множество древовидных структур для моделирования пользовательского интерфейса. DOM представляет элементы HTML, CSSOM делает то же самое для CSS. Есть даже accessibility дерево. React также использует древовидные структуры для управления и моделирования пользовательского интерфейса, который вы создаете. React создает деревья пользовательского интерфейса из вашего JSX. Затем React DOM обновляет элементы DOM браузера, чтобы они соответствовали этому дереву пользовательского интерфейса. (React Native переводит эти деревья в элементы, специфичные для мобильных платформ.)Состояние привязано к положению в дереве
Когда вы задаете состояние компонента, вы можете подумать, что это состояние «живет» внутри компонента. Но на самом деле состояние хранится внутри React. React связывает каждую часть состояния, которую он хранит, с правильным компонентом в зависимости от того, где этот компонент находится в дереве пользовательского интерфейса. В примере ниже есть только один JSX-тег<Counter />
, но он отображается в двух разных позициях:
Это два отдельных счетчика, поскольку каждый из них отображается в своей позиции в дереве. Обычно вам не нужно думать об этих позициях, чтобы использовать React, но может быть полезно понять, как он работает. В React каждый компонент на экране находится в полностью изолированном состоянии. Например, если вы визуализируете два компонента счетчика рядом, каждый из них получит свои собственные независимые состояния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> ); }
score
и hover
.
React будет сохранять состояние до тех пор, пока вы рендерите один и тот же компонент в одной и той же позиции. Чтобы увидеть это, увеличьте оба счетчика, затем удалите второй компонент, сняв флажок «Render the second counter», а затем добавьте его обратно, отметив его снова: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> ); }
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 сохраняет состояние компонента, пока он остается в том же положении. Обычно это именно то, что вам нужно, поэтому это имеет смысл в качестве поведения по умолчанию. Но иногда вам может понадобиться сбросить состояние компонента. Рассмотрим это приложение, которое позволяет двум игрокам отслеживать свои очки во время каждого хода:В этой реализации при смене игрока счет сохраняется. Два счетчика отображаются в одной и той же позиции, поэтому 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> ); }
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», первая позиция очищается, но вторая теперь содержит счетчик.
Вариант 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>
содержит состояние для вводимого текста:
Попробуйте ввести что-нибудь в поле ввода, а затем нажмите “Alice” или “Bob”, чтобы выбрать другого получателя. Вы заметите, что состояние ввода сохраняется, потому что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' }, ];
<Chat>
отображается в той же позиции в дереве.
Во многих приложениях это может быть желаемым поведением, но не в приложении чата. Вы не хотите, чтобы пользователь отправил сообщение, которое он уже набрал, не тому человеку из-за случайного клика. Чтобы исправить это, добавьте key
:
Это гарантирует, что при выборе другого получателя компонент чата будет воссоздан с нуля, включая все состояния в дереве под ним. React также будет воссоздавать элементы DOM вместо их повторного использования. Теперь переключение получателя всегда очищает текстовое поле:<Chat key={to.id} contact={to} />
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.
- Вы можете заставить поддерево сбросить свое состояние, назначив ему другой ключ.
- Не вставляйте определения компонентов друг в друга, иначе вы случайно сбросите состояние.
Пишем первый 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.