8 ключевых решений в разработке на React

https://medium.freecodecamp.org/8-key-react-component-decisions-cc965db11594
  • Перевод
image

Тяжело выбрать, имея так много опций.

React стал open-source проектом в 2013. С тех пор он очень развился. Поискав в интернете, вы можете найти старые посты с разными подходами. Здесь я опишу восемь ключевых решений которые ваша команда должна поддерживать, когда пишут на React.

Решение 1: среда разработки


Перед тем как вы напишете свой первый компонент, вашей команде необходимо согласовать среду разработки. Есть множество вариантов.

image


Каким инструментом вы обычно пользуетесь при разработке на React?

Конечно, все можно сделать с нуля. 25% разработчиков на React делают именно так. Моя команда использует связку create-react-app с дополнительными функциями, такими как Mock-API, которое поддерживает CRUD, библиотека многократного использования компонентов и с улучшенным линтером.

Лично мне нравится create-react-app, однако здесь вы можете выбрать бойлерплейт, подходящий именно под ваши запросы по множеству критериев. Нужен серверный рендер? Посмотрите Gatsby или Next.js. Вы даже можете рассмотреть возможность использования онлайн-редактора, такого как CodeSandbox.

Решение 2: Типы


Вы можете игнорировать типы, использовать PropTypes, Flow или TypeScript. Обратите внимание, что начиная с React 15.5 PropTypes находится в отдельной библиотеке, поэтому старые посты на эту тему больше не актуальны.

Сообщество разделяется в этой теме:

image


Для соблюдения типов в React, я обычно использую…

Я предпочитаю PropTypes, потому что я считаю, что он обеспечивает достаточную безопасность типов в компонентах React. Используя комбинацию тестов Babel, Jest tests, ESLint, и PropTypes, я редко вижу проблемы типа времени выполнения.

Решение 3: createClass vs ES классов


React.createClass был отдельным API, но в 15.5, он устарел. Некоторые считают, что мы слишком забежали вперед к ES классам. Несмотря на это, функция createClass была удалена из React’a и отнесена к одной главе под названием “React без ES6” в документации React. И так ясно: ES классы это будущие. Вы можете легко конвертировать код из createClass в ES классы, используя react-codemod.

Решение 4: Классы или Функции


Вы можете объявить компоненты React’a через классы или функции. Классы полезны, когда вам нужны ссылки или lifecycle-методы. Вот 9 причин, чтобы использовать функции, когда это возможно. Но, также, стоит отметить, что у функциональных компонентов есть свои недостатки.

Решение 5: Состояния


Вы можете использовать стандартный реактовский стейт. Этого достаточно. Для масштабирования можно использовать lifting state. Или вы можете наслаждаться Redux или MobX.

image


Пожалуйста без споров — честно интересно, что React сообщество использует в эти дни. Для новых React проектов я использую ...

Мне нравится Redux, но я часто использую стандартный стейт React, когда это возможно. На данный момент мы выпустили кучу React приложений, и решили что Redux худший выбор. Я предпочитаю делать много маленьких автономных приложений поверх одного большого приложения.

На заметку, если вы интересуетесь неизменяемыми структурами, тут вы можете посмотреть 4 способа сделать состояния неизменяемыми.

Решение 6: Binding


Существуют несколько способов биндинга функций в React-компонентах. Современный JS предлагает достаточно способов для биндинга. Вы можете биндить функции в конструкторе, в рендере, использовать функцию в рендере, использовать свойства классов или декораторы. Посмотрите комментарии в этом посте, чтобы увидеть больше возможностей. Каждый подход имеет свои достоинства, возможно, вам нравится использовать экспериментальные возможности языка, лично я предлагаю использовать свойства классов.

Этот опрос был в августе 2016. С тех пор свойства классов стали популярны, а createClass упал в популярности.

image


Замечание: Многие в замешательстве от того, почему стрелочные функции и биндинг функции при рендере вызывают проблемы. Реальная причина? Это делает shouldComponentUpdate и PureComponent капризными.

Решение 7: Стили


Вот где вариантов действительно много. Существует 50+ подходов для написания стилей к вашим React-компонентам включая традиционный CSS, Sass/Less, CSS-модули и 56 CSS-in-JS опций. Без шуток. Я провел статистику и вот что получилось:

image

Красный это плохо. Зеленый это хорошо. Серый это опасно.

Посмотрите почему так много пунктов в опциях стилизации. Тут нет явного победителя.

Как вы стилизируете ваше #reactjs приложения(ответьте конкретной библиотекой)?

image

Видно как CSS-in-JS набирает обороты. Css-модули теряют обороты.

Моя команда использует Sass с BEM и мы этим довольны, но мне также нравятся styled-компоненты.

Решение 8: Переиспользуемый код


В React существуют так называемые миксины — механизм для многократного использования кода. Однако в настоящие время использовать миксины не рекомендуется. Вы не можете использовать миксины с компонентами ES классов, из-за этого люди используют компоненты высшего порядка и render-props (a.k.a. функция как потомок) для наследования кода между компонентами.

image


Опрос для разработчиков пишуших на #ReactJS: Что вы предпочитаете?

Компоненты высшего порядка более популярны сейчас, но я предпочитаю render-props с тех пор, как они стали проще для чтения и создания.



И это не все


Вот еще несколько решений:


А так как React — это всего лишь Javascript, вы можете использовать длинный список из опций JS такие как: точки с запятой, запятые, форматирование и именование обработчика событий.

Выберите стандарты, затем разрабатывайте


В конце концов, существует десятки комбинаций которые вы можете увидеть в интернете.
Эти шаги являются ключевыми:

  1. Обсудите все с командой и выберете свой стандарт
  2. Не тратьте время на ручную проверку кода. Соблюдайте свои стандарты с помощью таких инструментов как ESLing, eslint-plugin-reactи prettier.
  3. Нужна реструктуризация существующих React-компонентов? Используйте react-codemod для автоматизации этого процесса.

Хотите узнать больше о React?


Я веду курсы по React и JavaScript на Pluralsight (free trial).

image

Cory House является автором курсов по JavaScript, React, .NET и пр., главным консульнтантом на reactjsconsulting.com. Готовит разработчиков на международном уровне. В своем твиттере пишет о JavaScript и front-end разработке @housecor.

Перевод: Вячеслав Букатов



EDISON Software профессионально занимается разработкой для крупных заказчиков, например, мы разрабатывали клиентскую часть GameStars для игры «League of Legends» и разрабатывали компонент отображения объектов на трехмерной карте на движке Unity, а так же создали сервис для слежки, который анализирует около 200 интернет-магазинов (более миллиона позиций).

Читать еще:

Каким инструментом вы обычно пользуетесь при разработке на React?
Для соблюдения типов в React, я обычно использую…
Что React-сообщество использует в эти дни. Для новых React проектов я использую…
Какой способ для биндинга вы используете в #reactjs сегодня?
Как вы стилизируете ваше #reactjs приложения(ответьте конкретной библиотекой)
Опрос для разработчиков пишуших на #ReactJS: Что вы предпочитаете?

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

  • +10
  • 9,3k
  • 8
Edison 372,13
Изобретаем успех: софт и стартапы
Поделиться публикацией
Комментарии 8
  • +1
    Какой способ для биндинга вы используете в #reactjs сегодня?

    А декоратор @autobind на методе — это какой ответ?

    • 0
      Если что-то пропустил в пунктах опроса — рекомендуйте, что добавить
      • 0

        Использую Function bind transform:


        ::this.func

        К тому же иногда использую явный, ванильный биндинг:


        this.func.bind(this, ...args)
      • +1
        Я использую react-autobind. Вызвал 1 раз в конструкторе и забыл.
        Вопрос: какие плюсы у autobind-decorator?
        Спасибо.
        • +1

          В принципе то же самое, только вызывается как декоратор, который можно повесить на весь класс или отдельные методы. У нас используются и другие декораторы (debounce, bem-cn), поэтому такое использование выглядит лучше.

      • 0

        Какой способ для биндинга вы используете в #reactjs сегодня? — в случае withHandlers из recompose этот вопрос не имеет смысла. Но про recompose в статье вообще ничего нет.

        • +1
          В случае со стрелочными функциями в полях класса эта проблема тоже отпадает :D
        • +1
          Достаточно вольный перевод (либо автор, Cory House, отредактировал свою статью):

          Мне нравится Redux, но я часто использую стандартный стейт React, когда это возможно. На данный момент мы выпустили кучу React приложений, и решили что Redux худший выбор. Я предпочитаю делать много маленьких автономных приложений поверх одного большого приложения.


          Оригинал:
          I’m a fan of Redux, but I often use plain React since it’s simpler. In my current role, we’ve shipped about a dozen React apps, and decided Redux was worth it for two. I prefer shipping many, small, autonomous apps over a single large app.


          Скорее всего имелось ввиду, что из 12 проектов для 2 Redux был обоснованным выбором. Не указывается, остальные 10 не нуждались в усложнении или еще по каким причинам Redux для них не подходил.

          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

          Самое читаемое