React Academy · Урок

Изучение дерева компонентов и props

Исследуйте иерархии компонентов и просматривайте текущие значения props и состояния

«Изучение дерева компонентов и props» — бесплатный урок React Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Добро пожаловать

На этом уроке Вы научитесь подробно изучать вложенные иерархии компонентов в React DevTools и читать сложные значения свойств и состояния на боковой панели панели компонентов.

Дерево компонентов — это отражение

Каждый компонент, который Вы видите в DevTools, отражает вложенность JSX. Корневым элементом обычно является компонент App. Дочерние элементы расположены с отступом под родительскими, точно так же, как в исходном коде.

Выбор компонента

Нажмите на любое имя компонента в дереве. На правой панели сразу отображаются его **свойства**, **хуки** (состояние, эффекты, ссылки), а также **исходный** файл и номер строки, где он был определён.

Чтение строковых и числовых свойств

Строковые свойства отображаются в кавычках: `"hello"`. Числа отображаются без кавычек: `42`. Логические значения отображаются как `true` или `false`. Наведите указатель на значение, чтобы увидеть его полное содержимое, если оно обрезано.

Раскрытие свойств-объектов и свойств-массивов

Если значение свойства является объектом или массивом, DevTools отображает сворачиваемое дерево. Нажмите на стрелку рядом с `{…}` или `[…]`, чтобы развернуть его и увидеть каждый вложенный ключ и значение.

Просмотр свойств-функций

Свойства-функции (например, обработчики `onClick`) отображаются как `f onClick()`. Нажмите на маленький значок стрелки рядом с ними, чтобы перейти к определению функции на панели исходного кода.

Фильтрация дерева

Используйте поле поиска в верхней части панели компонентов, чтобы отфильтровать элементы по имени. Введите `Button`, чтобы показывать только компоненты, в имени которых содержится *Button*. Это особенно удобно в приложениях с сотнями компонентов.

Переход от DOM к React

На вкладке **Элементы** щёлкните правой кнопкой мыши узел DOM и выберите **Просмотреть компонент React** (доступно при установленном DevTools). DevTools переключится на вкладку компонентов и выберет компонент React, который отрисовал этот узел.

Редактирование свойств в DevTools

Дважды щёлкните значение свойства в DevTools, чтобы изменить его в реальном времени. Компонент мгновенно повторно отрисуется с новым значением. Это удобно для проверки крайних случаев без изменения исходного кода.

Копирование свойств в формате JSON

Щёлкните правой кнопкой мыши любое значение свойства или состояния в DevTools и выберите **Копировать значение**. Значение будет скопировано в буфер обмена в формате JSON — это удобно для вставки в тесты или документацию.

Быстрая проверка

Как развернуть свойство-объект или свойство-массив на панели компонентов React DevTools?

Итоги

Теперь Вы умеете перемещаться по деревьям компонентов, читать строки, числа, объекты и функции, фильтровать элементы по имени, переходить от элементов DOM к компонентам React и редактировать свойства в реальном времени в DevTools.

Следующий урок: **Использование вкладки профилировщика** — Вы запишете отрисовки, научитесь читать пламенные диаграммы и находить компоненты, ответственные за медленные взаимодействия.

Часто задаваемые вопросы

Урок «Изучение дерева компонентов и props» бесплатный?

Да — полный текст урока «Изучение дерева компонентов и props» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Изучение дерева компонентов и props»?

Исследуйте иерархии компонентов и просматривайте текущие значения props и состояния Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Изучение дерева компонентов и props»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к React Academy