Ищете способы очистить свой код реакции? В этом посте мы рассмотрим пять советов, которые помогут вам стать лучшим разработчиком 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. Ваш код станет чище и более управляемым, и вам станет немного легче работать продуктивнее в целом. Если у вас есть какие-либо советы, которые можно добавить, или какие-либо критические замечания по поводу предоставленных, оставьте комментарий и дайте мне знать.

А пока обязательно ознакомьтесь с другими статьями:

Удачного кодирования! 😄

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.