Это пара плагинов, о которых я недавно узнал, и которыми я хочу поделиться с вами, ребята.
Давайте начнем!
почему-вы-обновили
Это довольно приятный плагин, который я использовал только недавно при отладке ошибки из АД в нашем приложении.
На самом деле это не было связано с решением, но помогло мне обнаружить другие части приложения, которые действительно можно было бы оптимизировать, и я определенно буду использовать его снова в будущем.
В основном это говорит вам о компонентах, которые рендерятся без необходимости. Это могло быть вызвано изменением свойств/состояния родителя или, как в нашем случае, плохо используемыми селекторами в mapStateToProps, что приводило к тому, что каждый раз при запуске mapStateToProps возвращался новый объект.
Хотя это не всегда так полезно, как хотелось бы.
Когда это так, он дает вам это (экран взят со страницы библиотеки npm):
Это здорово, потому что мы сразу знаем, что «b» всегда возвращает новый объект, что заставляет компонент рендериться, даже если значения объекта не изменились.
Но иногда это дает нам это:
Это все еще круто, но не так полезно, как скриншот выше, так как он не говорит нам, какое свойство имеет другую ссылку.
Все же лучше, чем слепо изучать каждый компонент.
ОЧЕНЬ КРУТОЙ плагин!
Подробнее здесь:
https://www.npmjs.com/package/why-did-you-update
Реактотрон
Просто по названию вы уже знаете, что это будет хорошо.
Ну типа.
Но, эй, это все же лучше, чем «к черту этот плагин»!
На самом деле это не плагин, а полноценное настольное приложение.
Это похоже на redux-dev-tools, но с парой дополнительных функций (а также с меньшим количеством функций… Все зависит от того, что вам нужно от каждой библиотеки).
Хотя я предпочитаю redux-dev-tools из-за его удобства и просто потрясающести, у этого плагина тоже есть свои применения.
Он имеет повторное отправленное действие одним нажатием кнопки, интересную систему ведения журнала и систему бенчмаркинга с пошаговым ведением журнала.
Но это только кажется, что он был создан для реактивного, а не для обычного реактивного JS. Например, сетевой плагин, из-за которого меня это и привлекло, не работает на React JS. Это плагин, который позволяет отслеживать все XMLHttpRequests.
В целом, я не думаю, что буду использовать этот плагин для обычной разработки React JS, пока, возможно, он не получит лучшую поддержку для него. Я буду придерживаться redux-dev-tools.
Но если вы разрабатываете React Native, это кажется очень интересным, помогая отлаживать эти ужасные сообщения об ошибках.
Подробнее здесь:
Инструменты разработчика React (выделить обновления)
Это потрясающий плагин, и вы, вероятно, уже знаете, что он существует, поэтому я не буду вдаваться в подробности.
Всего несколько вещей, которые он может сделать:
- Давайте посмотрим на все дерево приложения с компонентами в качестве узлов вместо обычных собственных HTML-элементов, как мы видим на вкладке «Элементы». Это также позволяет нам увидеть свойства каждого компонента.
- Обновления компонентов, как мы видим в приведенном выше GIF, который работает как мигание краски Chrome, но вместо того, чтобы показывать нам, когда что-то рисуется на странице, он показывает нам, когда компонент обновляется, что действительно круто.
Мы можем видеть разницу между миганием краски в Chrome и функциональностью инструментов React Developer «Выделить обновления».
Просто позвольте мне быстро записать видео.
Вы можете сравнить это с приведенным выше GIF. Paint Flashing на самом деле не помогает нам узнать, какие компоненты обновляются или нет, а только то, что нарисовано на странице.
Хотя все равно полезно!
Наконец, у нас есть «Profiler», который представляет собой «новую» функцию React Dev Tools, которая работает аналогично профилировщику Chrome, но для React.
Вы можете узнать больше об этом здесь:
Больше информации:
И это все на этой неделе!
Как всегда, если бы вы могли аплодировать или подписаться, это было бы здорово, так что я могу без зазрения совести указать это в своем резюме и LinkedIn.
Цитата недели
«Я здесь, чтобы надрать задницу и жевать жевательную резинку, а у меня закончилась жевательная резинка»
Родди Пайпер
Увидимся на следующей неделе! 👌
