выгода отchromeМощные возможности отладки браузера,console.logМожно сказать, что это самый прямой способ решения неизвестных проблем во фронтенд-разработке. Но когдаReactНа самом деле в проекте есть лучшее решение для отладки, которое является официальным (Facebook).react devtools, вы можете выполнить целенаправленную отладку кода. хочу попробоватьreact devtoolsЕсли вы копатель, вы можете сначала прочитать эту статью, чтобы понять, что может сделать этот инструмент. (Небольшое длинное текстовое предупреждение, можете отметить первым👍)
Установка и открытие
Установить
В интернетеreactВ проектеReact DevToolsкак браузерплагинпринести,chromeВ программе расширения его можно добавить в программе расширения.firefoxДобавить ссылку: Открыть меню -> Веб-разработчик -> Получить дополнительные инструменты -> Поиск «Инструменты разработчика React» -> Установка
chrome:
firefox:
Для открытия интернет-магазина Chrome может потребоваться научный доступ в Интернет, Firefox не требует научного доступа в Интернет для обычной установки плагинов, нет никакой разницы в использовании
Ввод инструмента
Если обнаружено, что текущая сетьreact проект,в правом верхнем углуЗначок инструмента (в правой части адресной строки) изменится в соответствии с:
отладочная версияизreactПроект, кодирую👨🏻💻
Серийная версияРеакция, указывающая, что она была упакована и выпущена
Указывает, что текущая зависимая версия реакции относительно старая и обычно появляется в версии реакции 15 и более ранних.
В сети не обнаружено зависимости реакции ❌
chromeсредний правый кликэкзамен, откройте отладчик и найдите две специальные вкладки в конце панели вкладок отладчика, а именно ⚛️ Components и ⚛️ Profiler, эти двеreact devtoolsЗапись функции , ниже будут представлены их соответствующие функции.
Дерево структуры JSX 🌲
Для облегчения демонстрационной функции здесьтабличный дисплейа такжеФункция поиска, компонентный уровеньUserПод компонентом есть дваUserSearch а такжеUserListкомпонент.
позиция
JSX ДаReactакцент в грамматике,ComponentsИнструменты также являются большой частью шоу.react изJSXвиртуальныйDomдерево, значок выбора в верхнем левом углу используется сchrome devtoolsВыбор такой же, после нажатия вы можете найти конкретный компонент, который хотите просмотреть.
Перейдите к
UserSearchкомпонент
использовал некоторые в проектеReact-router,reduxДождавшись инструмента, виртуальныйDomДеревья могут подвергаться некоторым вторжениям, таким какDomбольше в деревеConext.Consumerструктура, этоcontextСинтаксис , независимо от этих структур,Двойной кликЦелевой компонент можно развернуть до подробной структуры этого компонента, например: дважды щелкнитеUserКомпоненты:Разве это не намного яснее?
UserследующийSuspense,SuspenseНиже есть два пользовательских компонента, красная подчеркивание отмечает компонент в глобальномDomразличные уровни дерева.
Приостановка используется с ленивой загрузкой реакции, документация:Это - function.react JS.org/docs/code - это...
фильтр
Еще одинСоветыВы можете легко отфильтровать некоторые нежелательные отображенияDom, нажмите наsettingВ раскрывающемся списке маленького значка есть столбец для настроек компонентов, а затем найдите «Скрыть компоненты, где», где вы можете добавить фильтры, чтобы установить параметры фильтрации, и указано значение каждой конфигурации. ниже.
Ключ первого столбца фильтра:
| имя | имея в виду |
|---|---|
| location | маршрутизатор маршрутизирует соответствующие компоненты |
| name | групповая цена |
| type | Разбивка по различным типам компонентов (см. таблицу ниже) |
| hoc | компоненты более высокого порядка |
И местоположение, и имя используются для регулярного сопоставления
введите необязательное значение:
| имя | имея в виду |
|---|---|
| class | Компоненты класса, которые наследуют React.Component |
| context | общий контекст |
| function | функциональные компоненты |
| forward ref | Функциональные компоненты соответствуют требованиям HOC |
| host(e.g )
|
HTML-элементы, поддерживаемые браузерами, div, h1, p |
| memo | Функциональные компоненты делают HOC оптимизированным для реквизита |
| other | Другое❓ (будет добавлено) |
| profiler | измерение производительности |
| suspense | Ленивая загрузка корневого компонента |
Отладка отдельных компонентов 🔧
После обнаружения целевого компонента можно выполнить однокомпонентную отладку.Двойной кликкомпоненты,react devtoolsИнформация о компонентах появится справа от , например,props,state,hooks,render by Ждать.
от
propsинформацию можно увидеть,UserкомпонентRouterКомпонент первого уровня под , там будетlocation,history,matchи другую дополнительную информацию.
classКомпоненты класса были бы лучше,hooksкореньstateИмя атрибута будет отсутствовать, временно доступно черезuseState<object>({msg: 'hello'})способ обхода, надеюсь последующие итерации решат эту проблему
Недостаточно просто посмотреть на свойства.Средний вид и среднее использованиеВот и все, друзья-внимательные копатели нашли строчку в правом верхнем углу.iconсейчас:
1. Показать резервный статус ленивой загрузки
На этот раз кнопка стиля иленивая загрузка Suspenseсвязанные, когдаSuspenseкомпонентchildrenКогда он не загружен, происходит переходloadingэффект, нажмите кнопку, он отобразитfallbackв атрибутеReactNode, что удобно для предварительного просмотра эффекта загрузки.
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
импортировано сюдаantd изSkeletonэффект какloading изпромежуточное состояние, маленький значок подсвечивается, указывая на то, чтоloadingОтладка состояния.
2. Проверьте настоящий Дом компонента
существуетReactнаписано наJSXДерево компонентов, отображаемое кодом, на самом деле не реальноDOMдерево, так что естьстиль отладки,Изменить копию, прямое действиеDOMпотребности, все еще нужно переключиться обратноchrome devtools изElement, затем найдитеElementДругая операция выбора будет немного неудобной.Кнопка этого маленького значка глаза используется для определения реального дома компонента.здесь через
UserSearchКомпонент позиционируется на реальныйdomдерево, для более глубоких слоевdomструктура илиz-indexДля DOM со сложной иерархией такое расположение функций весьма удобно.
3. Отладочная информация
Кнопка этой ошибки будет довольно запутанной при первом использовании.После нажатия на нее, кажется, что она не имеет никакого эффекта, а затем на некоторое время появится абзац текста:
записывать данные этого компонента в консоль
затем переключитесь наchrome devtools изconsoleВы можете найти подсказку, здесь есть иUserSearchИнформация о связанных компонентах:
Согласно оперативной информации,щелкните правой кнопкой мышилюбое значение, затем нажмите «Сохранить как глобальную переменную», чтобы сохранить какглобальная переменная, мы выбрали здесь
PropsвнизonSearchметод:
consoleНовый появится вtemp1переменная, эта переменная указывает наonSearchЭталонное значение , вызовtemp1функция эквивалентнаonSearch,onSearchБизнес-логика основана на параметрахфильтрСписок пользователей, следующий для фильтрации записей, содержащих «xu»:
это
debugМетод более удобен в некоторых особых случаях, например, его нельзя активировать при обычном взаимодействии со страницей.Асинхронный интерфейсВозвращаемое значение может сработать и так далее.
4. Найдите информацию о исходной карте
Последняя кнопка очень знакома, обычно в некоторыхДокументация библиотеки компонентоввидно в примере кода, например.antd,fusion,iviewи другие библиотеки компонентов пользовательского интерфейса, которые используются в качестве отладочной записи для расширенного кода,react devtoolsФункция тоже аналогична, вот соответствующее расположение компонентаSourceфайл, здесь я переключаюсь наUserSearch соответствующийindex.tsxфайл, настроенный в среде разработкиsource-map, компонент позиционирования может отображаться непосредственноисходный код.здесь
sourceФункция очень мощная, чаще всего используетсяточка останова, например, мыresetTriggerНажмите две точки останова внутри и нажмите кнопку сброса, чтобы активировать точку останова:
и обратите внимание на правый столбецScopeбудутИнформация о закрытии, закрытие здесь на самом делеuseState APIсохраняет полученные функциональные компоненты,filterЭто содержимое в поле ввода, такого рода отладки можно избежать, потому чтоconsole.logПосле модификации кодаПерекомпилировать проект, и может оставить после себя какой-то грязный код.
Отслеживание ошибок производительности 🚥
Так же есть ⚛️ что такое профайлер, может я только начал связыватьсяReactОдноклассники могут не очень хорошо знать, вreactПредставлен один из официальных документовProfiler API, можно добавить вReactв любом месте дерева для измерения результирующего рендеринга этой части дереванад головой,Применение:
render(
<App>
<Profiler id="Navigation" onRender={callback}>
<Navigation {...props} />
</Profiler>
<Main {...props} />
</App>
);
onRenderфункция обратного вызова вcallbackВходные параметры содержат всю информацию о рендеринге в подкомпоненте, что полезно для устранения неполадок компонента.проблемы с производительностью:
function onRenderCallback(
id, // 发生提交的 Profiler 树的 “id”
phase, // "mount" （如果组件树刚加载） 或者 "update" （如果它重渲染了）之一
actualDuration, // 本次更新 committed 花费的渲染时间
baseDuration, // 估计不使用 memoization 的情况下渲染整颗子树需要的时间
startTime, // 本次更新中 React 开始渲染的时间
commitTime, // 本次更新中 React committed 的时间
interactions // 属于本次更新的 interactions 的集合
) {
// 合计或记录渲染时间。。。
}
Ссылка на официальную документацию:this-function.react JS.org/docs/Prof IL…
Хотя отладка в проекте более гибкая, она имеет определенные требования к проекту.взлом кода, будет даже некоторая потеря производительности, поэтому при столкновении с использованием глобальныхprofilerВ сценарии вы можете сначала попробовать.React devtools изprofilerФункция.
Ниже для тестированияprofilerфункция, вUserListВ компонент для отображения добавлено 10 000 записей, давайте посмотрим, сколько времени уходит на это:Вот типичный анализ производительностиграфик пламени, который показывает времязатратное состояние каждого компонента на текущей странице. Если это ненормальный компонент, который занимает много времени, горизонтальная гистограмма будет отображаться какжелтый, и еще более предостерегающие 🚨 цвета, здесь это очевидно,
UserListЭто занимает довольно много времени, что соответствует нашим ожиданиям.
существуетprofilerВ системных настройках вы также можете включить переключатель при рендеринге компонента, иСпрятатьИсправленное время рендеринга следующие компоненты:
Здесь "почему этот рендер" объясняет
RouteКомпонент визуализировался впервые и занял 12,8 мс.
конец ⌛️
Вот некоторые часто используемыеreactМетод отладки, еще не рассмотренныйReact DevtoolsДля всех функций официальный также предоставляет учебники на английском языке, соответствующие их соответствующим функциям.Следующий портал👇 является ссылкой на конкретный учебник.Заинтересованные копатели могут зайти и посмотреть.
P.S. В тексте есть ошибки, прошу меня поправить.
Прекрасное прошлое 📌