Я работаю с react в течение нескольких лет в Pipefy и перенял некоторые передовые практики от моих коллег. В этом тексте я хотел бы поделиться некоторыми небольшими деталями, которые помогли мне написать более чистый и удобный в сопровождении код.
Tl;dr:
В этой статье вы найдете лучшие практики и несколько советов по React, как организовать класс React и несколько инструментов React.
Без сохранения состояния и функции
Чтобы снизить сложность, всегда важно помнить об этом при создании новых компонентов:
- Начни с самого простого
- Разработайте единую функцию без сохранения состояния
Компонент React может быть просто функцией, если ничего не мешает его жизненному циклу. Другими словами, в основном, когда компонент React не использует ни одну из следующих функций:
- конструктор()
- оказывать()
- setState ()
- componentDidCatch ()
- componentDidMount ()
- componentDidUpdate ()
- componentWillUnmount ()
- shouldComponentUpdate ()
Организуйте функции в классе React
Принятие шаблона для сортировки ваших функций в классе React также поможет вам просматривать большие файлы, что, в свою очередь, позволяет вам предвидеть, где будет размещена каждая функция.
Вы можете выбрать наиболее удобный для себя узор. Больше всего мне нравится:
- Конструктор
- Реагировать на методы жизненного цикла
- Метод других компонентов
- Оказывать
Даже будучи простой привычкой принимать новые стандарты работы, мы всегда должны оставаться дисциплинированными, тем более, если в проекте есть несколько разработчиков, когда эти стандарты должны постоянно документироваться и соблюдаться.
Один компонент на файл
Это упрощает поиск компонента в текстовом редакторе, особенно когда два файла могут иметь то же имя, что и компонент.
Используйте круглые скобки в методе рендеринга, если есть две или более строк.
Иногда мы пытаемся настолько упростить код, что можем создать ситуации, в которых мы легко можем попасть в ловушку. Когда мы используем теги JSX внутри javascript, это может привести к эстетической запутанности кода, и это очень часто встречается в методе рендеринга реакции.
Вы можете обойти это, используя круглые скобки для определения различных контекстов.
Обновляйте свой проект
Очень скучно обновлять зависимости в проекте javascript, но когда мы используем правильные инструменты, это становится тривиальным. Попробуйте использовать Пряжу с командой:
yarn upgrade-interactive
Используйте ключи в списках
Каждый раз, когда вы используете список, не забывайте ключи. Они помогают улучшить производительность рендеринга вашего компонента. Подробнее об этом читайте в React Docs!
Знайте и разбирайтесь в доступных инструментах
Высокая популярность React связана с тем, что в его экосистеме есть множество инструментов, которые помогают разработчику повысить производительность.
Вот список незаменимых инструментов:
- ES6 + ES7 + ES8
- EsLint
- Красивее
- Jest + Покрытие
- Flowjs
- Инструменты разработки React
- Инструменты разработчика Redux
React StrictMode
Использование StrictMode - безопасный способ предотвратить проблемы в проекте React, поскольку он увеличивает количество предупреждений в консоли javascript, уведомляя вас о:
- Побочные эффекты
- Компоненты, использующие небезопасные жизненные циклы
- Устаревший и устаревший API
Информация об этих предупреждениях поможет вам подготовить приложение к новым версиям React.
Эти маленькие советы решать вам, ни один из них не является обязательным, но я искренне верю, что они могут помочь вам писать лучший код.
У вас есть еще какие-нибудь советы, которыми вы можете поделиться с нами?
😉
Вам понравились эти советы? Если вы хотите узнать больше о React, не пропустите эту статью.
Кстати, мы набираем…
Спасибо за чтение, если вы хотите стать частью Pipefy, присоединяйтесь к нашей команде. Мы хотим с вами познакомиться.
