Который сейчас час? Reactime!

Reactime, ваш любимый инструмент отладки React, на этой неделе выпускает Reactime X. В настоящее время Reactime можно бесплатно загрузить в магазине расширений Chrome .

Что такое Reactime?

React, популярный интерфейсный фреймворк Facebook, улучшает взаимодействие с разработчиками с момента его выпуска еще в 2013 году. Однако процесс диагностики проблем приложений всегда был занозой для многих инженеров React. Reactime - это инструмент повышения производительности, который служит универсальным средством отладки и оптимизации управления состоянием.

Как работает Reactime?

React Fiber - это основной алгоритм согласования, лежащий в основе React. Fiber конструирует дерево компонентов как связанный список узлов, каждый из которых может иметь дочерний элемент, братьев и сестер, и обходит дерево, используя алгоритм обхода дерева односвязного списка. Когда состояния обновляются, Fiber специально повторно визуализирует узлы, которые подписываются на измененное состояние, тем самым минимизируя количество обновлений, необходимых для приложения. Мало того, что каждый узел ссылается на другие соседние узлы через свой связанный список, узлы также содержат ключевую информацию о той части приложения, на которую они ссылаются.

Узнайте больше о React Fiber здесь .

Reactime работает, просматривая дерево React Fiber и собирая важную информацию. Эта информация, которая включает ключевые свойства, такие как состояние и время рендеринга, хранится в «снимках», которые сохраняются в локальном хранилище Google Chrome. Разработчики могут использовать приложение для анализа ключевых характеристик каждого снимка. Кроме того, они имеют возможность путешествовать во времени по этим снимкам, чтобы отслеживать и визуализировать изменения состояния.

Главный аспект Reactime, который сделал его таким популярным инструментом для разработчиков, - это его самая привлекательная функция - путешествия во времени. Хотя это видно в Redux DevTools, Reactime предлагает приложениям на чистом React аналогичную возможность, позволяя разработчикам переключаться между снимками и видеть изменения, мгновенно отражающиеся в DOM целевого приложения. Однако до итерации Reactime X путешествия во времени были полностью функциональны только с приложениями, созданными с использованием традиционных компонентов класса. По мере перехода модернизированных кодовых баз к функциональным компонентам, использующим React Hooks, совместимость Reactime с путешествиями во времени также должна была быть пересмотрена, чтобы обеспечить полную функциональность с состояниями, установленными React Hooks.

Новые возможности Reactime X:

Совместимость с Reactime теперь включает приложения с хуками React

Reactime теперь полностью совместим с React Hooks! Чтобы обеспечить полную функциональность с помощью хуков, команда Reactime X нырнула под капот и реорганизовала основные алгоритмы Reactime для динамического учета нескольких экземпляров состояния, отображаемых React Hooks. Reactime X также добавил новые алгоритмы, чтобы обеспечить совместимость хуков с путешествиями во времени.

Когда Reactime анализирует React Fiber Tree, одной из наиболее важных частей информации, которую он захватывает, является текущее состояние снимка. Для компонентов класса все экземпляры состояния хранятся как свойства одного объекта. Во время путешествия во времени Reactime использует перехватчик useState, передавая объект состояния из целевого моментального снимка, чтобы обновить состояние в целевом приложении. Однако, когда в игру вступают хуки, все начинает усложняться, поскольку отдельные состояния, установленные с помощью хуков React, хранятся отдельно друг от друга. Чтобы учесть это, Reactime X пришлось переписать основной алгоритм, чтобы скомпилировать каждый отдельный экземпляр состояния в один объект. Во время путешествия во времени команде также пришлось реорганизовать алгоритм, чтобы не вызывать обобщенную ловушку useState, а вместо этого использовать уникальный установщик каждого экземпляра состояния.Как всегда при разработке, управляемой тестированием, команда создала дополнительные комплекты тестирования Jest в сочетании с улучшенной совместимостью инструмента.

Улучшенная визуализация данных на вкладке истории

До Reactime X информация об узлах на вкладке истории не отображалась. Если пользователь желает увидеть состояние определенного узла, ему нужно будет найти соответствующую отметку времени под полосой перехода. Чтобы упростить отображение информации, Reactime X добавил функциональность на вкладку истории, которая позволяет пользователю видеть состояние моментального снимка каждого узла.

Дополнительные ключевые улучшения UI / UX

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

• Повышение читаемости информационного наведения на панели перехода.
• Добавление функциональности на вкладке карты, чтобы при щелчке в любом месте экрана всплывающая подсказка закрывалась (ранее только щелчок внутри всплывающей подсказки закрывал всплывающее окно).
• Улучшение видимости всплывающей подсказки на вкладке WebMetrics.

Reactime стремится улучшаться с каждой итерацией. Это продукт с открытым исходным кодом, который был восприимчив к конструктивным отзывам сообщества разработчиков React. Дайте нам знать, что вы думаете ниже, или перейдите на GitHub или reactime.io для получения дополнительной информации!

Авторы: Алекс Гомес , Эдар Лю , Кристина Валлен , Куан Ле , Роберт Маеда