Ищете способы очистить свой код реакции? В этом посте мы рассмотрим пять советов, которые помогут вам стать лучшим разработчиком React. Эти советы не только улучшат читабельность и удобство сопровождения вашего кода, но и повысят вашу производительность.
1. Использование файла jsconfig.json для лучшего импорта
Использование файла jsconfig.json
помогает настроить проект на использование символа @
для импорта, что делает ваши операторы импорта более понятными и простыми в управлении.
Пример:
Создайте файл jsconfig.json
или tsconfig.json
в корневой папке вашего проекта и добавьте следующую конфигурацию:
Теперь вместо использования относительного импорта следующим образом:
import MyComponent from '../../../../components/MyComponent';
Вы можете использовать символ @
для импорта из папки src
:
import MyComponent from '@/components/MyComponent';
Это делает ваши операторы импорта менее подверженными ошибкам и более легкими для чтения.
2. Оптимизация обработки форм с помощью Name Prop и FormData
Использование реквизита name
для элементов <input />
позволяет получить значение ввода из класса FormData, что приводит к более чистой и управляемой обработке формы.
Пример:
Вот как многие из нас используют формы в React:
Вместо этого мы можем получить данные непосредственно из объекта FormData:
Как видите, использование реквизита name
упрощает обработку данных формы и снижает потребность в нескольких переменных состояния для управления входными значениями.
3. Используйте Vite вместо приложения create-реагировать
Vite — это инструмент сборки и сервер разработки, который предлагает более быстрое время разработки и сборки по сравнению с create-react-app
. Vite использует собственные модули ES, что означает, что ваш браузер может напрямую импортировать и запускать ваш код без связывания во время разработки.
Пример:
Чтобы создать новый проект React с помощью Vite, выполните следующую команду:
npm create vite@latest my-react-app --template react
Почему вы должны использовать Vite вместо приложения create-реагировать? Хорошо,
- Ускоренная разработка: Vite предлагает более быструю разработку благодаря собственным модулям ES и эффективной обработке зависимостей.
- Улучшенное время сборки: Vite значительно сокращает время сборки по сравнению с приложением create-реагировать, повышая производительность разработчиков.
- Оптимизированная производительность: экономичная архитектура Vite приводит к меньшим размерам пакетов и повышению общей производительности.
- Горячая замена модуля (HMR): Vite обеспечивает мгновенные обновления во время разработки, что обеспечивает более плавный и эффективный рабочий процесс.
- Гибкость: Vite поддерживает различные фреймворки и библиотеки, предоставляя разработчикам больше возможностей для своих проектов.
- Более простая настройка: процесс настройки Vite более прост и интуитивно понятен по сравнению с приложением create-реагировать.
4. Используйте оператор спреда для реквизита
Оператор распространения позволяет вам передавать все свойства объекта компоненту, не записывая их по отдельности, что делает ваш код более кратким и удобным в сопровождении. Этот метод упрощает чтение и обслуживание вашего кода за счет уменьшения объема кода, который необходимо написать при передаче нескольких реквизитов.
Пример:
Вместо того, чтобы передавать каждую опору отдельно, вот так:
<MyComponent prop1={prop1} prop2={prop2} prop3={prop3} />
Вы можете использовать оператор распространения для одновременной передачи всех реквизитов:
const props = { prop1, prop2, prop3 }; <MyComponent {...props} />
5. Использование SWR для выборки данных поверх выборки
SWR — это библиотека React Hooks для удаленного извлечения данных. Он предлагает такие функции, как кэширование, повторная проверка и отслеживание фокуса, что делает его лучшим выбором по сравнению с собственным API-интерфейсом для извлечения данных в ваших компонентах React.
Пример:
Сначала установите библиотеку SWR:
npm install swr
Затем используйте SWR для выборки данных в вашем компоненте React:
Не нужно настраивать сложное хранилище, кучу переменных состояния или беспорядочные сервисы. Просто настройте функцию извлечения, простой хук useSWR
и используйте свои данные.
Следуя этим советам, вы станете лучшим разработчиком React. Ваш код станет чище и более управляемым, и вам станет немного легче работать продуктивнее в целом. Если у вас есть какие-либо советы, которые можно добавить, или какие-либо критические замечания по поводу предоставленных, оставьте комментарий и дайте мне знать.
А пока обязательно ознакомьтесь с другими статьями:
- Создание интерактивных картографических приложений с помощью Leaflet.js и Vue Options API
- Как создавать собственные хуки React в TypeScript
- Использование Leaflet.js в проекте React: создание картографического приложения
- Как создать собственный элемент управления Geoman с помощью React-Leaflet и Leaflet-Geoman-Free
Удачного кодирования! 😄
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.