Узнайте больше о прошлом, настоящем и будущем React и таких вещах, как Remix, React 18, Solid и других.
React — один из самых популярных фреймворков JavaScript. Хотя многие другие фреймворки предлагают некоторые преимущества, React сохранил доминирование. Вокруг React также существует обширная экосистема, которая быстро меняется. Эта статья призвана предоставить обзор последних тенденций в React, таких как Remix, серверные компоненты, частичная гидратация и многое другое.
Предыстория реакции
Болт и ФаксJS
Около десяти лет назад Facebook начал искать способ модернизировать свое веб-приложение. Он становился все более сложным, и им нужна была структура, чтобы упростить его создание и поддержку. Чтобы исправить это, они создали проект под названием Bolt. Bolt был фреймворком MVC, построенным поверх JavelinJS, и он решил многие проблемы, которые были у Facebook. Однако это не было совершенным. Джордан Уоке, разработчик Facebook, создал следующую версию Bolt под названием FaxJS. Он предлагал множество функций, которые React имеет сегодня, например, рендеринг как на клиенте, так и на сервере, сравнение DOM и многое другое. Джордан Уоке переименовал FaxJS в FBolt и начал использовать его в кодовой базе Facebook.
Создание React
В 2013 году Facebook переименовал FBolt, как вы уже догадались, в React. Кроме того, они начали работать над JSX, уровнем абстракции для определения пользовательского интерфейса в React. JSX компилирует HTML-подобные операторы в вызовы функций JavaScript. Интересно, что, согласно сообщению команды React, JSX изначально был основан на системе на PHP, которая позволяла встраивать литералы XML. Первоначально JSX был просто ответвлением jsx-xml-literal.
Начальный рост
После этого React начал немного расти. Репозиторий React на GitHub достиг 10 тысяч звезд в конце 2014 года, 20 тысяч в 2015 году и 50 тысяч в 2016 году. Кроме того, экосистема React начала расти благодаря таким вещам, как Reactiflux.
Крючки
Хуки — это способы определения методов жизненного цикла в функциональных компонентах. В 2019 году React выпустил хуки, которые полностью изменили то, как люди пишут приложения в React. До того, как появились хуки, вам приходилось использовать классы для компонентов с состоянием. Функциональные компоненты могли быть только простыми компонентами, которые просто полагались на реквизит. Однако хуки предлагали способ доступа к состоянию через функции, что открывало путь к полному использованию функциональных компонентов. В настоящее время большинство новых приложений используют хуки вместо компонентов класса, поскольку хуки проще в использовании и более лаконичны.
Почему люди используют React
Динамическое обновление
React автоматически обновляет ваш пользовательский интерфейс, если ваши данные изменяются, экономя значительное количество времени. Например, если у вас есть таблица различных транзакций, настроенная на обновление каждые 15 секунд, вам придется определить проверку и обновление различий вручную. Однако в такой среде, как React, вы можете просто изменить значение данных, и все произойдет за вас. Динамическое обновление также упрощает работу с пользовательским интерфейсом, поскольку вы можете гарантировать, что он представляет данные.
Изоморфный рендеринг
React может отображать пользовательский интерфейс как на клиенте, так и на сервере с помощью одного и того же кода. Это открывает возможности для рендеринга на стороне сервера и гидратации на клиенте. Таким образом, React контрастирует со многими традиционными языками шаблонов, где вы можете генерировать статический HTML, но не делать его автоматически интерактивным.
React делает это через два разных API. Их основная функция API рендеринга, доступная через react-dom, — это render, которая рендерит JSX, передаваемый клиенту. Однако для рендеринга HTML на сервере есть renderToString под react-dom/server, который отображает статический HTML, который можно гидратировать позже с помощью render.
Расширенные шаблоны
React позволяет вам делать много вещей, чтобы уменьшить количество повторений в вашем коде, включая встраивание JavaScript и модульную разметку внутри компонентов. Эти функции помогают уменьшить повторение и нагрузку на техническое обслуживание, упрощая обновление повторяющихся фрагментов разметки.
Состояние реакции
Remix и новые фреймворки React
Remix — это новый фреймворк React (например, Next.js), созданный людьми, разработавшими React Router, исходный код которого только недавно был открыт, но он очень быстро растет. Remix обещает лучшую интеграцию с функциями веб-платформы, интеграцию с периферией и более простой изоморфный код. Ремикс уже успел набрать 12 тысяч звезд. Еще одна уникальная особенность Remix заключается в том, что вместо создания статического сайта и динамического рендеринга на стороне сервера он полностью фокусируется на рендеринге на стороне сервера. Это означает, что, хотя Remix не поддерживает генерацию статического сайта, если вы предпочитаете отображать динамические данные на сервере, а не использовать API-выборку на клиенте, Remix работает достаточно хорошо. Конечно, есть компромиссы между рендерингом на сервере и получением данных на клиенте для динамических данных, и это зависит от вашего варианта использования. Наконец, благодаря опыту автора в создании React Router, Remix имеет расширенную маршрутизацию с такими функциями, как вложенная маршрутизация и изолированные ошибки.
Remix — не единственный новый фреймворк React. Есть и другие, вроде Астро. Astro — многообещающий генератор статических сайтов, который поддерживает несколько способов создания пользовательского интерфейса, включая React. Astro также примечателен тем, что поддерживает частичную гидратацию, что уменьшает количество JavaScript, отправляемого клиенту, за счет включения только того, что необходимо для интерактивности вашего веб-приложения.
Реагировать 18
React 18 — это предстоящий выпуск React, который предлагает множество новых функций, таких как одновременный рендеринг. Параллельный рендеринг позволяет одновременно создавать несколько версий пользовательского интерфейса, что открывает возможности для новых функций, таких как автоматические пакетные обновления, потоковое рендеринг на стороне сервера и многое другое. Эти функции помогают повысить производительность. Например, автоматические пакетные обновления сокращают количество необходимых обновлений пользовательского интерфейса, что повышает производительность клиента.
CSS
Существует множество подходов к использованию CSS в React. Конечно, вы можете использовать собственный CSS, но есть много других подходов, которые лучше работают со стилем пользовательского интерфейса React.
CSS в JS
CSS в JS очень хорошо интегрируется с React. Самый популярный инструмент CSS в JS — styled-components, который позволяет вам определять стили внутри JavaScript с помощью шаблонов с тегами. Однако есть более новые подходы к CSS в JS, которые часто лучше в определенных отношениях. Одними из самых интересных из них являются линария и экстракт ванили. Linaria — это библиотека, целью которой является оптимизация CSS в JS путем компиляции CSS в JS в собственный CSS. Linaria также имеет встроенную интеграцию с React, что упрощает добавление динамических стилей без больших затрат времени выполнения. vanilla-extract делает то же самое, но лучше интегрируется с TypeScript и предлагает такие функции, как создание пользовательских стилей утилит.
Атомарный CSS
Atomic CSS хорошо работает с React благодаря своей области видимости. Поскольку стили являются атомарными, они автоматически ограничиваются только элементами, которые их используют, что упрощает рассмотрение стилей с помощью компонентов. Кроме того, повторение Atomic CSS можно решить с помощью компонентов. Одними из самых известных библиотек Atomic CSS в настоящее время являются Tailwind и UnoCSS. Tailwind, безусловно, является самой доминирующей библиотекой Atomic CSS из-за большого разнообразия функций и простоты использования. UnoCSS — более новый проект, который значительно быстрее и гибче, чем Tailwind.
Более быстрые замены React
Хотя у React много преимуществ, производительность не входит в их число. К счастью, есть замены React, которые сохраняют идентичный или почти идентичный API. Наиболее заметными являются Preact и Solid. Во-первых, у нас есть Preact. Preact быстрее и значительно меньше (3 КБ в сжатом виде), чем React, но имеет идентичный API. Вы можете использовать Preact практически везде, и его можно использовать в качестве замены на preact/compat. Во-вторых, есть Солид. Solid не имеет API, идентичного React, но то, как он отличается, позволяет ему получить большое преимущество в производительности. С точки зрения производительности во время выполнения Solid значительно быстрее, чем Preact и React. Solid достигает этого, отказываясь от виртуального DOM и создавая компоненты только один раз, а не при каждом обновлении состояния. Solid также меньше, чем React, хотя и немного больше, чем Preact.
Заключение
Я надеюсь, что вы узнали что-то из этого сегодня. Если вам понравилось это читать, подпишитесь на список рассылки здесь и подпишитесь на ByteofDev RSS, чтобы получать больше этих статей. Спасибо за прочтение!
Первоначально опубликовано на https://byteofdev.com 13 февраля 2022 г.
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.
