Я работаю с React уже несколько лет, за это время многому научился. Насколько я понимаю, хорошее владение ванильным javascript поможет вам освоить любую технологию, связанную с javascript. Чтобы ускорить процесс, ознакомьтесь с основами, поймите, как React работает внутри, и наслаждайтесь отладкой.
В этом посте я представляю вам несколько отличных передовых практик, о которых вы, возможно, еще не знали, и постараюсь помочь вам стать лучшими разработчиками React.js.
Используйте библиотеку response-error-boundary для обработки ошибок
Ошибки обязательно случаются, и они являются неизбежной частью программирования. Границы ошибок введены в React 16 как способ перехватывать и обрабатывать ошибки javascript, возникающие в части пользовательского интерфейса наших компонентов, которые перехватывают ошибки, возникающие в методах жизненного цикла, методах рендеринга и внутренних ловушках, таких как useEffect
, но границы ошибок не обрабатываются. ошибки в обработчиках событий, асинхронном коде, рендеринге на стороне сервера и ошибках самой границы. Для получения дополнительной информации посетите Официальный документ React.
react-error-boundary — это оболочка вокруг ErrorBoundar React, которая преодолевает ограничение компонента ErrorBoundary. Это позволяет нам использовать функцию withErrorBoundary
в качестве HOC для управления проблемами внутри компонентов. ниже приведен простой пример из документа react-error-boundary
Используйте useMemo для кэширования дорогостоящих операций
useMemo
— один из хуков, предлагаемых React. Это используется для создания запоминаемых значений, которые кэшируются до тех пор, пока они или их зависимости не меняются. useMemo
выполняется во время рендеринга, где основная цель не избежать повторного рендеринга в подкомпонентах:
useMemo
следует использовать при большом объеме обработки- Порог, с которого
useMemo
становится интересным для предотвращения дополнительной обработки, сильно зависит от вашего приложения. - Использование
useMemo
в случаях с очень низкой обработкой может привести к дополнительным накладным расходам на его использование.
вот простой абстрактный пример,
Используйте хук useReducer
Первый вопрос, который у меня возник, когда я впервые прочитал документы React, был «Когда мне следует использовать React.useReducer
вместо React.useState
. Я встречал в Интернете разные мнения по этому вопросу, но предпочитаю React.useReducer
, когда мне нужно обновить несколько объектов. Я объясню с кодом.
Мы часто прибегали к React.useState
в качестве хука по умолчанию для сохранения состояния в наших компонентах. Однако со временем состояние компонента может стать более сложным в зависимости от новых требований, таких как наличие нескольких состояний. В некоторых случаях использование хука React.useReducer
может помочь избежать множественных значений состояния и упростить логику обновления. Ниже приведен простой пример для React.useReducer
Используйте ленивую загрузку/разделение кода
Разделение кода — это функция, поддерживаемая такими сборщиками, как Webpack, Browserify и Rollup, которые могут создавать несколько пакетов, динамически загружаемых во время выполнения. Разделение кода — это метод, помогающий генерировать пакеты, которые могут выполняться динамически. Это также помогает сделать код более эффективным, поскольку пакет содержит все необходимые импорты и файлы.
С помощью разделения кода можно реализовать «ленивую загрузку», что означает использование только того кода, который необходим в данный момент.
Поскольку и React.lazy
, и Suspense пока недоступны для рендеринга на сервере, рекомендуется использовать https://github.com/gregberge/loadable-components для разделения кода в приложении, рендеримом на сервере. React.lazy
полезен для визуализации динамического импорта как обычного компонента.
Извлечение многоразового входа в пользовательские хуки
Как мы знаем, хуки позволяют нам повторно использовать логику с отслеживанием состояния без изменения иерархии компонентов. Если вы обнаружите, что одна и та же логика повторяется в разных компонентах, то ее можно преобразовать в хук, который инкапсулирует логику и просто вызовет хук как функцию внутри ваших компонентов.
Литералы объектов вместо переключателя
В большинстве случаев, когда нам нужно использовать условные операторы, мы предпочитаем использовать if/else или переключать регистры. Проблема с корпусом переключателя заключается в том, что он работает не так хорошо. Мы можем использовать простой объектный литерал, как показано ниже.
Использовать деструктурирование объектов для реквизита
Синтаксис присваивания реструктуризации — это выражение JS, позволяющее распаковывать значения из массивов или объектов в отдельные переменные.
Используйте фрагмент, когда div не нужен
Компонент реакции может отображать только один HTML-тег на корневом уровне. Поэтому, если вы хотите отобразить два соседних элемента, вам нужно обернуть их в другой элемент.
Протестируйте свой код
Поскольку мы знаем, что тестирование обеспечивает целостность кода, рекомендуется писать тестовые примеры для каждого разрабатываемого компонента, поскольку это снижает вероятность получения ошибок при развертывании кода в рабочей среде. Обратитесь к официальному документу по реакции для получения более подробной информации.
Вот и все! Спасибо за чтение и счастливого кодирования.
Если статья была полезна, ставьте лайк и делитесь. Вы можете подключиться и подписаться на меня в LinkedIn, Twitter или Github.