Когда я впервые начал изучать кодирование и разработку приложений ReactJS, наставник посоветовал мне заранее ознакомиться с передовыми практиками, которым нужно следовать, чтобы я мог помнить об этом при разработке веб-приложения, соответствующего стандартам React. С другой стороны, общий поиск в Google предлагает 100 различных статей для чтения, и ирония заключается в том, что эта статья скоро станет одной из них. Тем не менее, вот коллекция некоторых из лучших моментов, которые я обнаружил.
На первый взгляд, изучение оригинальной документации React — это всегда хорошая идея, и вот несколько ключевых моментов, которые выделяются:
- Разбивка пользовательского интерфейса на иерархии компонентов, в идеале придерживаясь принципа единой ответственности, когда каждый компонент выполняет только одну конкретную задачу.
- Создайте начальную статическую версию вашего приложения, в которой не используется какое-либо состояние.
- Односторонний поток данных или односторонняя привязка в React делают все модульным и быстрым.
- Определите абсолютный минимум изменяемых состояний, требуемых приложением.
- Определите, какие данные составляют состояние, например данные, которые не передаются от родителя через реквизиты, изменяются со временем или не могут быть вычислены на основе других состояний или реквизитов в компоненте и т. д. (общие качества состояния).
- Состояние должно принадлежать компоненту общего владельца или компоненту более высокого уровня в иерархии.
Чтобы упростить задачу, создайте компонент для сохранения состояния и поместите его выше общего владельца в иерархии.
Один раз поддерживается поток данных вниз по иерархии, добавьте обратный поток данных. - Состояния должны быть изменены, чтобы отразить пользовательский ввод, если пользователь должен отправить данные в программу; компоненты должны обновлять только свое собственное состояние.
В то время как руководство содержит важные моменты, которым нужно следовать, я нашел более составленный список лучших практик в записях технического блога, и вот что я нашел:
- Держите ваши компоненты минимальными и функциональными.
- Возможность повторного использования имеет важное значение, и производство новых компонентов должно быть сведено к минимуму.
- Изучите избыточный код на наличие шаблонов и сходств, чтобы объединить его.
- Сведите комментарии к минимуму, чтобы избежать визуального беспорядка в коде.
- Чтобы сделать его более узнаваемым, назовите компонент после функции.
- Имена компонентов должны начинаться с заглавных букв, чтобы JSX мог отличить их от стандартных тегов HTML.
- Любой компонент React, созданный в JSX, должен быть назван в регистре Pascal или в верхнем регистре.
- Отдельные аспекты состояния и рендеринга; Компоненты с состоянием сохраняют информацию о состоянии, а компоненты без состояния — нет.
- Поддерживайте текущее и предполагаемое поведение, выполнение и тестирование кода.
- Все файлы, относящиеся к компоненту (файлы CSS, значки, фотографии, тесты и любые другие подкомпоненты), должны храниться в одной папке.
- Убедитесь, что любой новый код, добавленный в ваш проект, тщательно протестирован на функциональность и интеграцию с существующим кодом.
- Разбивайте чрезмерно длинные строки в соответствии с линтингом (программой, которая анализирует код на наличие потенциальных проблем).
- Убедитесь, что все приложение и весь написанный код протестированы.
- Используйте библиотеки сниппетов (ES7 React, Redux, JS Snippets и другие), чтобы не отставать от лучшего и новейшего синтаксиса и не допускать ошибок в коде.
Спасибо и, как всегда, удачного кодирования!
Вот мой LinkedIn
— Манул Мандалаватта
Бакалавриат по разработке программного обеспечения
https://github.com/ManulThisuraka/dbs-test-query/blob/main/Query
SLIIT, Шри-Ланка