оригинал:medium.com/better-pro Страна…
Переводчик: Front-end Xiaozhi
Чтобы обеспечить удобочитаемость, в этой статье используется вольный перевод, а не дословный перевод.
Важность в следующих инструментах не зависит от ранжирования.
1.Webpack Bundle Analyzer
Вы когда-нибудь задумывались, на какие пакеты или части вашего приложения приходится общий размер?Webpack Bundle Analyzerможет помочь нам проанализировать.
Webpack Bundle AnalyzerСоздает работающий сервер и предоставляет интерактивную древовидную визуализацию зависимостей. С помощью этого набора инструментов вы можете увидеть расположение визуализированного файла, размер gzip, размер синтаксического анализа и детали между родителем и дочерним элементом.
Самое замечательное в этом инструменте то, что вы можете оптимизировать свое приложение React на основе того, что видите.
Ниже приведен график анализа, который он генерирует:
ясно видноpdfРазмер пакета занимает большинство приложений, а также занимает наибольшую долю аналитических изображений, что является эффектом того, что вы видите, это то, что вы получаете для нас.
Однако создание графика анализа занимает ограниченное место, и вы также можете указать некоторые полезные параметры, чтобы просмотреть его более подробно, напримерgenerateStatsFile: true, и, при желании, сгенерируйте статическийHTMLфайл, который можно сохранить где-нибудь за пределами среды разработки для последующего использования.
2. React-Proto
React-Protoэто инструмент прототипирования для разработчиков и дизайнеров. Это настольное программное обеспечение, поэтому вы должны загрузить и установить это программное обеспечение перед его использованием.
Ниже приведена простая демонстрация того, как его использовать:
Приложение позволяет объявитьpropsа такжеtypes, просматривать компоненты в дереве, импортировать фоновые изображения, определять их как с состоянием или без состояния, определять, каким будет их родительский компонент, увеличивать/уменьшать масштаб и экспортировать прототипы в новые или существующие проекты.
Приложение кажется более подходящимMacпользователя, но он все еще работает дляWindowsПользователь.
После завершения работы с пользовательским интерфейсом вы можете выбрать экспорт в существующий или новый проект. Если вы решите экспортировать в существующий проект и выберите корневой каталог, он экспортирует их в./src/components,Следующим образом:
вместе сReact hookВыпущенное, это приложение необходимо обновить, чтобы выполнять больше работы. Конечно, открытый исходный код является преимуществом этого приложения, так как позволяет составить список популярных репозиториев с открытым исходным кодом в будущем.
3. Why Did You Render
Why Did You RenderMonkey-patch React информирует вас о повторных рендерингах, которых можно избежать.
Monkey Patch: Это название произошло от фреймворка Zope. При исправлении ошибок в Zope люди часто добавляют части обновлений в конец программы. Они называются «партизанскими патчами». Позже guerilla постепенно стали писать как gorllia ((горилла), а позже написало monkey (обезьяна), поэтому название мартышкиного патча такое необъяснимое.
Патчи Monkey в основном используются для следующих целей:
- Замена методов, свойств и т. д. во время выполнения
- Добавляйте неподдерживаемые функции без изменения стороннего кода
- Добавляйте исправления к объектам в памяти во время выполнения, а не в исходный код на диске.
Это очень полезно не только для того, чтобы помочь нам исправить производительность проекта, но и для того, чтобы помочь вам понятьReactкак это работает. И, когда вы лучше понимаетеReactВы становитесь лучше, когда это работаетReactРазработчик.
объявив дополнительное статическое свойствоwhyDidYouRenderи установите его значение вtrue, слушатели могут быть прикреплены к любому пользовательскому компоненту
import React from 'react'
import Button from '@material-ui/core/Button'
const Child = (props) => <div {...props} />
const Child2 = ({ children, ...props }) => (
<div {...props}>
{children} <Child />
</div>
)
Child2.whyDidYouRender = true
const App = () => {
const [state, setState] = React.useState({})
return (
<div>
<Child>{JSON.stringify(state, null, 2)}</Child>
<div>
<Button type="button" onClick={() => setState({ hello: 'hi' })}>
Submit
</Button>
</div>
<Child2>Child #2</Child2>
</div>
)
}
export default App
После этого на консоль выводится раздражающе подробное предупреждение:
Не воспринимайте это как ложный совет, примите это как благо. Воспользуйтесь этими раздражающими сообщениями, чтобы вы могли исправить эти расточительные повторные рендеры.
4. Create React App
каждый знает,Create React AppЭто самый быстрый способ создания проектов React (из коробки).
Что лучше, чемnpx create-react-app <name>Проще
Чего некоторые из нас могут не знать, так это того, как использовать CRA для созданияTypeScriptпроект, это тоже очень просто, просто добавьте в конце--typescriptТолько что:
npx create-react-app <name> — typescript
Это избавляет от необходимости ручногоTypeScriptДобавлено к хлопотам проектов создания CRA.
5. React Lifecycle Visualizer
React Lifecycle Visualizerэто пакет npm для отслеживания и визуализации произвольныхReactМетоды жизненного цикла компонента.
а такжеWhy Did You RenderКак и в инструменте, вы можете выбрать любой компонент для запуска визуализатора жизненного цикла:
import React from 'react'
import {
Log,
VisualizerProvider,
traceLifecycle,
} from 'react-lifecycle-visualizer'
class TracedComponent extends React.Component {
state = {
loaded: false,
}
componentDidMount() {
this.props.onMount()
}
render() {
return <h2>Traced Component</h2>
}
}
const EnhancedTracedComponent = traceLifecycle(TracedComponent)
const App = () => (
<VisualizerProvider>
<EnhancedTracedComponent />
<Log />
</VisualizerProvider>
)
Результат запуска следующий:
Однако одним из недостатков является то, что в настоящее время он работает только длякомпонент класса, так что пока не поддерживаетсяHook.
6. Guppy
GuppyдаReactДружественный и бесплатный диспетчер приложений и средство запуска задач, которое работает на рабочем столе и является кроссплатформенным, вы можете с уверенностью его использовать.
Он предоставляет удобный графический интерфейс для многих типичных задач, с которыми часто сталкиваются разработчики, таких как создание новых проектов, выполнение задач и управление зависимостями.
GuppyКак это выглядит после запуска
7. react-testing-library
react-testing-library— отличная библиотека для тестирования, которая позволяет вам чувствовать себя комфортно при написании модульных тестов. Этот пакет предоставляетReact DOMУтилиты тестирования, поощряющие передовые методы тестирования.
Это решение предназначено для решения проблемы тестирования деталей реализации, а не для тестирования входных/выходных данных компонентов React так, как если бы их видел пользователь.
Этоreact-test -libraryПроблема, которую нужно решить, потому что в идеале вы просто хотите, чтобы ваш пользовательский интерфейс работал и отображался правильно в конце.
Неважно, как вы передаете данные этим компонентам, если они по-прежнему обеспечивают ожидаемый результат.
Вот пример кода для тестирования с этой библиотекой:
// Hoist helper functions (but not vars) to reuse between test cases
const renderComponent = ({ count }) =>
render(
<StateMock state={{ count }}>
<StatefulCounter />
</StateMock>,
)
it('renders initial count', async () => {
// Render new instance in every test to prevent leaking state
const { getByText } = renderComponent({ count: 5 })
await waitForElement(() => getByText(/clicked 5 times/i))
})
it('increments
count', async () => {
// Render new instance in every test to prevent leaking state
const { getByText } = renderComponent({ count: 5 })
fireEvent.click(getByText('+1'))
await waitForElement(() => getByText(/clicked 6 times/i))
})
8. React Developer Tools
React Developer Toolsэто расширение, позволяющееChromeа такжеFirefox Developer ToolsПроверьте иерархию компонентов React в .
ЭтоReactНаиболее распространенное расширение в разработке, иReactОдин из самых полезных инструментов, который разработчики могут использовать для отладки своих приложений.
9. Bit
пройти черезBitМожно увидеть тысячи компонентов с открытым исходным кодом и разрешить использовать их для создания проектов.
В списке есть много-много компонентов React, которые мы можем использовать, включая вкладки, кнопки, диаграммы, таблицы, панели навигации, раскрывающиеся списки, счетчики загрузки, средства выбора даты, хлебные крошки, значки, макеты и многое другое.
10. Storybook
Storybookэто библиотека для простого создания компонентов пользовательского интерфейса. Инструмент из коробки запускает живой сервер разработки с поддержкой горячей перезагрузки, где вы можете самостоятельно разрабатывать живыеReactкомпоненты.
Этого достаточно для обычной страницы документации:
11. React Sight
Вы когда-нибудь задумывались, как ваше приложение будет выглядеть на блок-схеме?React SightПозволяет визуализировать приложения React, показывая живое дерево иерархии компонентов всего приложения.
Он также поддерживаетreact-router,Reduxтак же какReact Fiber.
С помощью этого инструмента вы можете наводить указатель мыши на узлы, которые являются ссылками на компоненты, напрямую связанные с компонентами в дереве.
Если у вас возникли проблемы с просмотром результатов, вы можете ввести в адресной строкеchrome:extensions, найдите поле React Sight и нажмите“Allow access to file URLs”переключиться следующим образом:
12. React Cosmos
React Cosmos— это инструмент разработки для создания повторно используемых компонентов React.
Он сканирует ваш проект на наличие компонентов и позволяет:
- Рендеринг компонентов с любой комбинацией свойств, контекста и состояния.
- Макет каждой внешней зависимости (ответ API,
localStorageЖдать). - Наблюдайте за изменением состояния приложения в режиме реального времени при взаимодействии с запущенными экземплярами.
13. CodeSandbox
CodeSandboxОнлайн-редактор, в котором можно создавать и запускать веб-приложения.
CodeSandbox изначально поддерживается только на ранней стадииReact, но теперь они расширились доVueа такжеAngularДругие стартовые шаблоны для других библиотек.
Они также поддерживают использование общих генераторов статических сайтов, таких какGatsbyилиNext.js), чтобы создать проект для запуска веб-проекта React.
14. React Bits
React Bitsпредставляет собой набор шаблонов, методов, советов и приемов React, написанных в формате онлайн-документации, где вы можете быстро получить доступ к различным шаблонам и методам проектирования, анти-шаблонам, стилям, вариантам UX на той же вкладке и другим полезным, связанным с React материал.
GitHub repo, в настоящее время имеет 10083 звезды.
15. folderize
folderizeявляется расширением VS Code. Он позволяет преобразовывать файлы компонентов в структуру папок компонентов. Компонент React по-прежнему остается компонентом, просто преобразованным в каталог.
Например, допустим, создается компонент React, который принимает файл какpropsдля отображения полезной информации, такой как метаданные
Логика компонента метаданных занимала много строк, поэтому мы решили разбить ее на отдельные файлы. Однако при этом у нас есть два взаимосвязанных файла.
Итак, есть каталог, который выглядит примерно так:
мы могли бы захотетьFileView.jsа такжеfilemetada.jsабстрагируется в структуру каталогов, напримерAppleто же самое, особенно учитывая добавление большего количества сFileScanner.jsи другие компоненты, связанные с файлами.
Этоfolderizeсделано для нас, чтобы компоненты получили подобную структуру
16. React Starter Projects
React starter projectsЭто список зависимых библиотек, вы можете быстро использовать имя нужной вам зависимой библиотеки и перейти к соответствующейgithubначальство.
Как только вы увидите понравившийся стартовый проект, вы можете просто клонировать библиотеку и модифицировать ее под свои нужды.
Однако не все зависимые библиотеки используются при клонировании, потому что некоторые из них необходимо установить в форме до того, как они станут зависимостями проекта.
17. Highlight Updates
Это, пожалуй, самый важный инструмент в наборе для разработки.Highlight UpdatesдаReact DevToolsФункция расширения, чтобы увидеть, какие компоненты на странице перерисовываются без необходимости.
Это может помочь вам легче найти некоторые проблемы с производительностью при разработке страниц, потому что они будут использовать оранжевый или красный цвет для серьезных проблем повторного рендеринга.
18. React Diff Viewer
React Diff Viewerэто простой и красивый инструмент сравнения текстовых различий, который поддерживает разделенное представление, встроенное представление, различие символов, выделение строк и многое другое.
19. JS.coach
JS.coachэто веб-сайт, который я использую чаще всего с библиотеками, которые нужны React. Найдите все, что вам нужно, на этой странице.
Это быстро, легко, постоянно обновляется и всегда дает мне результаты, которые мне нужны для всех моих проектов. Недавно был добавлен React VR, и это здорово.
20. Awesome React
Awesome ReactБиблиотеки с открытым исходным кодом — отличный список, связанный с React.
Я могу забыть о других сайтах и изучать React только по этой ссылке. Потому что здесь можно найти много полезных ресурсов, которые определенно помогут нам создавать отличные приложения React!
21. Proton Native
Proton NativeПредоставляет нам среду React для создания кроссплатформенных собственных настольных приложений.
этоElectron, с некоторыми полезными функциями, в том числе:
-
Тот же синтаксис, что и у React Native.
-
Работает с существующими библиотеками React, такими как Redux.
-
Совместим со всеми обычными пакетами Node.js.
Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, всем рекомендую полезный инструмент мониторинга ошибок.Fundebug.
Коммуникация (приглашаем вступить в группу, группа будет присылать красные конверты по рабочим дням, технология интерактивного обсуждения)
Статьи из серии галантерейных товаров резюмируются следующим образом: если вы чувствуете себя хорошо, нажмите «Звезда», добро пожаловать в группу, чтобы учиться друг у друга.
Я Сяо Чжи, автор официального аккаунта "Moving the World",Продолжайте знакомить энтузиастов с передовыми технологиями. Я буду часто делиться тем, что я узнал и увидел, На пути продвижения, давайте подбадривать друг друга!
Обратите внимание на публичный аккаунт и отвечайте в фоновом режимеБлагосостояние, вы можете увидеть преимущества, вы знаете.