react 2021 что нового
6 лучших практик React в 2021 году
Написание чистого и удобочитаемого кода необходимо для повышения его качества. Кроме того, чистый код легче тестировать. Нет причин не потратить пять лишних минут на рефакторинг кода, чтобы сделать его более удобным для чтения.
В этой статье рассматриваются шесть лучших практик React 2021 года, чтобы улучшить свой код. Речь пойдет о следующих пунктах:
Используйте event.target.name для обработчиков событий.
Используйте хуки React для обновления состояния.
Разделяйте функции на отдельные элементы для улучшения качества кода.
Как создавать пользовательские хуки в React?
#1: Используйте поле name обработчика события
Когда у вас есть форма с одним полем ввода, вы напишете одну функцию onFirstInputChange для перехвата содержимого поля ввода.
Вот текущая ситуация при использовании неоптимизированной формы с двумя полями ввода. Нам приходится определять обработчик события onChange для каждого отдельного элемента ввода формы. Этот шаблон создает много повторяющегося кода, который трудно поддерживать.
Как вы можете видеть, каждая функция обработчика события обновляет состояние. При работе с несколькими элементами формы код становится очень запутанным, поскольку для каждого события приходится писать новую функцию.
Легко, верно? Конечно, часто требуется дополнительная проверка данных, которые вы сохраняете в своем состоянии. Используйте оператор switch, чтобы добавить пользовательские правила проверки для каждого отправленного значения.
#2: Избегайте ручного биндинга this
Вот классический пример «биндинга», который происходит в конструкторе.
Примечание: Вам необходимо изменить синтаксис обработчика событий на синтаксис стрелочной функции.
Ниже приведен пример синтаксиса стрелочной функции. Здесь нам не нужно писать дополнительный код в конструкторе, чтобы связать this.
Это так просто, как только возможно! Вам не нужно беспокоиться о биндинге функций в конструкторе.
#3: Используйте хуки React для обновления состояния
Начиная с версии React 16.8.0, появилась возможность использовать методы состояния и жизненного цикла внутри функциональных компонентов с помощью хуков React. Другими словами, можно писать более читабельный код, который также намного проще поддерживать.
Когда я могу использовать хук? Если вы пишете функциональный компонент и понимаете, что вам нужно добавить в него состояние, раньше вам приходилось преобразовывать его в класс. Теперь можно использовать хук внутри существующего функционального компонента.
Теперь можно напрямую обращаться к константам items и errorMsg в вашем компоненте.
Далее, можно обновить состояние внутри функции следующим образом:
Вот как можно использовать хуки состояний.
#4: Кэширование операций с большими накладными расходами при помощи useMemo
Поэтому можно использовать хук useMemo для запоминания результата при передаче тех же параметров в мемоизированную функцию. Хук useMemo принимает функцию и входные параметры для запоминания. React называет это массивом зависимостей. Каждое значение, на которое ссылается функция, также должно появиться в вашем массиве зависимостей.
#5: Разделение функций на чистые функции для улучшения качества кода
В соответствии с общепринятой практикой React, вы должны разделить функции, которые не используют ваш компонент. Другими словами, это функция, которая не зависит от какого-либо состояния или хуков React.
Поэтому сортировка является отличным примером функции, которую вы можете извлечь как чистую.
Можно задаться вопросом, почему необходимо использовать функциональное программирование?
Теперь давайте применим эту концепцию к компонентам React. Вот функция, которая может находиться как внутри компонента React, так и снаружи. Обе они являются функциями сравнения, которые вы можете передать затратной функции сортировки, принимающей два входных параметра. Поскольку здесь нет взаимодействия с состоянием, можно извлечь обе функции в виде чистых. Это позволяет нам поместить чистые функции в отдельный файл и при необходимости импортировать их в несколько мест.
#6: Создание пользовательских хуков React
Можно задать пользовательские хуки React, начиная с ключевого слова use, как и все остальные хуки React. Это полезно, когда вы хотите разделить логику между различными функциями. Вместо того чтобы копировать функцию, мы можем определить логику в виде React хука и повторно использовать ее в других функциях.
Вот пример React-компонента, который обновляет состояние, когда размер экрана становится меньше 600 пикселей. Если это происходит, переменная isScreenSmall устанавливается в true. В обратном случае переменная становится false. Для обнаружения изменения размера экрана мы используем событие resize из самого окна.
В пользовательских хуках React нет ничего нового. Вы оборачиваете логику функцией и даете ей имя, начинающееся с use. Она действует как обычная функция. Однако, следуя правилу начинаться с «use», вы сообщаете всем, кто импортирует ее, что это хук. Более того, поскольку это хук, вы должны структурировать его таким образом, чтобы он соответствовал правилам хуков.
Вот как теперь выглядит наш компонент. Код стал намного чище!
Бонусный совет: Мониторинг фронтенда
Вот и все! Эта статья научила вас шести способам улучшения читабельности и качества кода.
Всех желающих приглашаем на бесплатный онлайн-интенсив «React-hooks».
React-hooks появились в React с версии 16.8, сегодня они используются уже повсеместно. За два вебинара мы разберемся, как работать с React-hooks, создадим компонент с использованием hooks, а также научимся делать кастомные hooks. Поработаем с react-testing-library и научимся тестировать компоненты и кастомные hooks. >> РЕГИСТРАЦИЯ
Планы React Native на второе полугодие 2021 года
Эта статья — перевод оригинальной статьи Luna Wei «React Native in H2 2021».
Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.
Вступление
За последний год в нашем мире так много изменилось, и React Native не исключение. Мы приветствовали новых членов в нашей команде (с которыми мы очень рады встретиться лично!), наши проекты созрели, и появились новые возможности. Мы рады поделиться всем этим с вами в этой публикации!
В Facebook наша команда работает полугодиями. Каждое полугодие мы пересматриваем нашу стратегию, устанавливаем планы и делимся ими внутри компании. Сегодня мы хотим поделиться с вами, нашим комьюнити, нашими планами на второе полугодие 2021 года.
Создание сообщества для успеха
Вовлечение комьюнити
Чтобы все двигались в одном направлении, мы хотим постоянно сообщать комьюнити о нашем видении и статусе. Публичное раскрытие нашего прогресса не является постоянным (пока). В этой половине мы придерживаемся более последовательного графика контента, который тренирует и настраивает процессы для сокращения пробелов. Помимо того, что мы делимся нашими обновлениями, мы также хотим использовать эту возможность, чтобы продемонстрировать достижения нашего комьюнити.
Развертывание и релизы новой архитектуры
В первом полугодии мы завершили развертывание новой архитектуры React Native для всех мобильных продуктов React Native в приложении Facebook. Facebook состоит из таких экранов, как вкладка маркетплэйс и профиль для знакомств, мы перенесли более 1000 экранов!
Во втором полугодии мы начинаем предлагать эту новую архитектуру комьюнити. Мы составили руководство, которое показывает, как переносить библиотеки и приложения. Мы уже поделились черновиками с ранними партнерами, которые поддерживают популярные библиотеки React Native. Мы надеемся получить их отзывы, поддержать их в обновлении их библиотек и узнать, как улучшить нашу инструкцию и реализации. Мы планируем распространить сценарий более широко, как только работа стабилизируется.
Состояние репозитория
Когда разработчики оценивают технологию, важным сигналом является состояние ее репозитория. Это впечатление определяется такими сигналами, как пропускная способность пулл реквестов, звездочки, время прошедшее с последнего коммита и т.п.. В репозитории React Native исторически отсутствовал процесс, обеспечивающий своевременное рассмотрение проблем и пулл реквестов. Наша работа в этой половине состоит из двух частей: нам необходимо решить большое количество запросов от комьюнити и разработать устойчивые методы обработки поступающих пулл реквестов. Мы надеемся, что эта работа также настроит нас на успех для большего вовлечения комьюнити через Issue и PR, поскольку сообщество начнёт использовать новую архитектуру. Вы можете следить за нашим прогрессом в бэклоге, используя эту доску проектов.
Продвижение технологии вперед
Новые архитектурные возможности
Как уже упоминалось, наша новая архитектура недавно завершила развертывание в мобильных приложениях Facebook! Мы уже создаем новые возможности, которые изменят кривую производительности React Native. Это включает поддержку параллельного рендеринга в React Native. Параллельный рендеринг позволяет React приостанавливать и возобновлять работу, а также быстро реагировать на высокоприоритетные события, такие как сенсорный жест. Нам также очень нравится параллельный рендеринг, чтобы использовать циклы простоя CPU для рендеринга закадровых функций продукта без замедления взаимодействия с пользователем на экране.
Мобилка и не только
Мы добились ошеломляющих успехов в создании мобильных приложений с помощью React в Facebook, и мы видели удивительные мобильные продукты от наших партнеров. Теперь мы хотим довести этот успех до большего количества платформ! Мы считаем, что ориентация на многие платформы позволяет нам извлечь новые уроки и улучшить наши предложения на мобильных платформах. (Мы расскажем об этом больше в одном из следующих постов.) Замечательная новость заключается в том, что мы уже начали предпринимать шаги, чтобы сделать это реальностью!
Facebook Messenger Desktop
Прошлым летом мы расширили сферу своей деятельности за пределы мобильных устройств, заключив партнёрство с Microsoft, чтобы ускорить разработку React Native для Windows и macOS. Мы также заключили партнёрство с командой Messenger в Facebook, чтобы предоставить пользователям возможности, которые возможны только на настольных компьютерах, и добиться огромного выигрыша в производительности по сравнению с их предыдущей реализацией Electron. Наше видение состоит в том, чтобы объединить высококачественный, восхитительный, естественный пользовательский интерфейс для настольных компьютеров с отличным опытом разработки React Native.
Команда Messenger’а имеет амбициозные планы относительно настольных приложений, включая поиск новых способов дальнейшего раскрытия уникальных возможностей настольных платформ и больших экранов. Мы рады продолжать предоставлять эти возможности, вкладывая больше средств в React Native для настольных ПК.
React Native и Виртуальная Реальность
Итого
Мы надеемся, что наши планы на второе полугодие воодушевят вас так же, как и нас, и мы с нетерпением ждем возможности поделиться с вами другими в ближайшие месяцы! Мы также будем присутствовать на React Native EU 1-го сентября 2021 года, где товарищ по команде Джошуа Гросс (@joshuaisgross) расскажет, как мы заменили архитектуру крупнейшего в мире приложения React Native. Зарегистрируйтесь в React Native EU, если вы еще этого не сделали! А пока подпишитесь на нас в Twitter (@reactnative), чтобы получать обновления о событиях, нашей дорожной карте и многом другом.
ТОП-25 библиотек React 2021–2022: новые, полезные, но малоизвестные пакеты JavaScript
1. React Hot Toast
Реактивный горячий тост — лучший тост в городе
Готовые, хорошо анимированные горячие уведомления для React. Добавьте в ваше приложение красивые всплывающие уведомления!
React Hot Toast
2. React Content Loader
SVG-компонент, для лёгкой и быстрой подгрузки заполнителей (placeholders), похоже на загрузку карточек Facebook.
React Content Loader 
React Content Loader
3. React Filepond
Новый способ загрузки файлов!
4. React Notion X
Быстрый и точный React-отрисовщик для Notion.
Поддержка TypeScript в комплекте! ⚡ ️
React Notion X React Notion X
5. React Select
React Select
6. Sweet Alert
Прекрасная замена для сообщений об успехе и ошибках, или других информационных сообщений.
Sweet Alert
7. React Query
Производительная и мощная синхронизация данных для React.
React Query
8. React Hook Form
Меньше кода, больше производительности!
Сокращение объема необходимого кода, а также устранение ненужной повторной отрисовки элементов — две основные цели React Hook Form.
React Hook Form
9. React Infinite Scroller
Бесконечная прокрутка для React
Бесконечная загрузка содержимого при помощи специального компонента React.
React Infinite Scroller
10. React Motion
Библиотека для решения проблем с анимацией.
React Motion
11. React DnD
Утилита React, помогающая создавать сложные интерфейсы с перетаскиванием (drag-and-drop) компонентов.
React DnD
12. React Desktop
Библиотека JavaScript, построенная на базе фреймворка React от Facebook, которая призвана привнести в веб нативный опыт работы с настольными компьютерами, с множеством компонентов для macOS Sierra и Windows 10.
React Desktop
13. Splitbee
Отслеживайте и оптимизируйте онлайн-бизнес при помощи Splitbee: удобная платформа для аналитики и конверсии.
Splitbee
14. React Window
Компоненты React для эффективной отрисовки больших списков и табличных данных.
React Window
15. Stripe Elements
Stripe Elements — это предварительно созданные компоненты пользовательского интерфейса, которые помогут вам в написании собственных попиксельно отрисованных (pixel-perfect) потоки оформления заказа как на настольных, так и на мобильных платформах.
Stripe Elements
16. Chakra UI
Простая, модульная и доступная библиотека компонентов, предоставляющая вам строительные блоки, необходимые для быстрого создания приложений React.
Chakra UI
17. Draft JS
Фреймворк для добавления продвинутого редактора текста в приложение React.
Draft.js легко впишется в любое React-приложение, ведь он абстрагирует от деталей отрисовки через API выбора и поведения ввода.
Draft JS
18. ChartJS
Админ-панели начнут выглядеть круто, как никогда раньше!
Постройте красивые диаграммы за считанные минуты благодаря Chartjs.
ChartJS
19. React Slick
Компонент carousel для React: один из лучших слайдеров демонстрации чего угодно.
React Slick
20. React Auto Suggest
Построенный на React компонент автопредложения, совместимый с WAI-ARIA.
React Auto Suggest
21. React Burger Menu
React-компонент боковой панели off-canvas с коллекцией эффектов и стилей, анимацией SVG-путей и CSS-переходами.
React Burger Menu
22. React Spinners
Коллекция компонентов загрузочных спиннеров для React.
React Spinners
23. React Bootstrap Datatable
Следующее поколение react-bootstrap-table. Datatable стал простым, как никогда раньше.
React Bootstrap Datatable
24. Styled components
Styled-components — это результат размышлений об улучшении CSS для стилизации систем компонентов React.
Styled Components
25. Semantic UI
Удобные для человека HTML-макеты
Semantic — это фреймворк для быстрого написания красивых, отзывчивых интерфейсов.
Спасибо, что уделили время подборке новых полезных библиотек для React, они определенно вам пригодятся, рано или поздно.
Экосистема React в 2021 году
Как лучше всего создавать приложения на React в 2021 году? Что изменилось с 2016 года? Какие библиотеки сейчас все используют?
Этот пост вдохновлен теперь удаленным постом Reddit от человека, который изучал React в 2016 году и был обеспокоен тем, как вернуться к нему и освежить свои навыки.
Я сам начал использовать и преподавать React в 2016 году. За последние несколько лет в самом React произошли большие изменения, и экосистема тоже немного изменилась.
Вот как обстоят дела в 2021 году.
Мышление в React: практически то же самое
Хуки против классов: большинство новых компонентов React используют хуки
Поначалу хуки выглядят странно, особенно если вы давно занимаетесь программированием. Переменные, которые, казалось бы, поддерживают состояние между вызовами функций, кажутся довольно волшебными. Но тут больше о массивах, чем о магии.
Как только вы освоитесь с тем, как работают хуки, и почувствуете, что такое useState, следующим серьезным препятствием, которое необходимо преодолеть, станет хук useEffect.
Лучшие библиотеки React в 2021 году
Что касается библиотеки, фавориты сообщества с годами изменились и продолжают развиваться.
Routing (маршрутизация)
React Router по-прежнему является доминирующим роутером (и, несмотря на название, на самом деле не является частью самого React). В настоящее время это версия 5 (почти 6), и API немного изменился по сравнению с более ранними версиями. Меньше «объявляйте свои роуты наверху» и больше «роуты являются компонентами; возьми их куда угодно». Документация охватывает v5, а для v6 есть превью блог. API v6 на самом деле ближе к v3, и, поработав немного, я думаю, это будет хороший API.
State Management
Redux по-прежнему используется во многих приложениях, в последнее время он колеблется в районе 30-50%. Новый официальный Redux Toolkit тоже отличный. Он помогает немного сократить бойлерплейтный код в сочетании с Redux хуком. Если вы собираетесь использовать Redux, обязательно ознакомьтесь с ним.
Тем не менее, Redux в меньшей степени является стандартом де-факто, чем был раньше. Все больше людей понимают, что встроенного в React управления состоянием достаточно для множества сценариев использования, особенно для тривиальных задач.
Есть также несколько новых специализированных библиотек для вещей, для которых вы, возможно, использовали Redux раньше. Я упомяну пару ниже.
Я использовал MobX State Tree в одном проекте, и мне понравилось работать с ним. Хорошо, если вам нужно управлять большим количеством состояний и вы хотите создать вокруг них структуру с помощью моделей.
В области state management, как всегда, есть много вариантов.
Context API
Если ваше глобальное состояние состоит из пары вещей, которые редко меняются (текущий пользователь, текущая тема, текущий язык и т.д.), вам не нужна библиотека для пробрасывания этих данных.
Context API + useContext хорош для передачи простого глобального состояния, управляемого через useReducer.
Context API был переделан в React 16.3. Старый contextType убран, а старое руководство по избеганию Context, если вы не являетесь меинтейнером библиотеки, на некоторое время исчезло. Хук useContext делает его действительно удобным.
Существует давняя путаница относительно того, использовать ли Context или Redux, и в чем заключаются различия. Прочтите сообщение в блоге от Mark Erikson о Context vs Redux для более подробного сравнения.
Загрузка данных
Что касается получения данных, стратегия помещения всего в Redux или глобальное хранилище становится все менее распространенной.
react-query хорошо справляется с получением данных и управлением состояниями загрузки/успеха/ошибки. Он заботится о поддержании глобального кэша данных через границы компонентов, при этом вам не нужно об этом думать. ИМХО, верная абстракция. Определенно стоит посмотреть.
Почему react-query?
Возьмем обычный сценарий, например ListPage/DetailPage для списка элементов. Вы открываете ListPage, он подгружает все виджеты или что-то еще. Пока хорошо.
Обычно вы, вероятно, кладете все данные в Redux или что-то в этом роде, так что, когда вы нажимаете на одну из страниц DetailPages, соответствующий элемент из списка, вероятно, уже был загружен. (о! но что, если пользователь загружает страницу DetailPage напрямую? Получается, нужно получить этот элемент отдельно)
Затем пользователь нажимает кнопку «Назад», и он снова возвращается на страницу ListPage, но у вас уже есть данные, поэтому вы можете просто отобразить их.
Все работает нормально, но есть исключения. Что, если элемент устарел между моментом, когда пользователь загрузил ListPage и щелкает по странице DetailPage? Что, если во время просмотра страницы DetailPage в список будут добавлены новые элементы?
Все становится еще сложнее, когда вы начинаете думать о разбиении на страницы и о том, хотите ли вы кэшировать страницы или повторно загружать все страницы, или что-то еще.
Я думаю, что все это подпадает под понятие «управление клиентскими данными», и мы уже давно используем для этого библиотеки управления состоянием. И мы решаем эти проблемы снова и снова, или игнорируем их и надеемся, что они не возникнут и исправляем их по мере появления.
Такие библиотеки, как react-query, по-другому решают проблему.
Поскольку эти данные хранятся в глобально доступном кэше, каждый компонент, которому требуется доступ, может вызывать useQuery(‘items’, fetchItems) для получения этих данных, и они будут автоматически извлечены, если они еще не доступны. И он также имеет дело с состояниями/загрузки/ошибки/успеха.
Он принимает любую функцию, возвращающую Promise, поэтому он работает с fetch, axios или любым другим инструментом подгрузки данных, который вы хотите использовать.
State Machines потрясающи
Существует альтернатива под названием Robot, и я написал туториал, где использовал ее для построения потока модалки подтверждения, если вы хотите понять, насколько могут быть полезны стейт машины.
Сборщики
Webpack по-прежнему везде. Сейчас он версии 5. Синтаксис конфига сильно изменился где-то около v2 или v3.
В настоящее время большинство людей используют Create React App для запуска новых приложений, что прекрасно и защищает вас от Webpack, если вам действительно не нужно его настраивать. Значения по умолчанию довольно надежны. Если вам нужно кастомизировать, обратите внимание на Craco.
CodeSandbox отлично подходит для создания быстрой демонстрации, и у них даже есть удобный https://react.new URL-адрес, по которому вы сразу перейдете в новый проект.
Формы
История форм продолжает развиваться. Я помню, как много лет назад использовал redux-form, и как приложение зависало каждый раз, когда я нажимал клавишу 😂 Оглядываясь назад, можно сказать, что «держать каждую унцию состояния в Redux» никогда не было хорошей идеей.
Formik и react-hook-form кажутся фаворитами сейчас, а формы на хуках набирают обороты.
Suspense
Долгожданная фича Suspense в React. все еще ожидается. Прямо сейчас она находится в React, и вы можете попробовать ее, но она находится в экспериментальном режиме, и создавать с ее помощью код для прода не рекомендуется. API все еще может измениться.