Recoil: будущее управления состоянием для React?

Управление состоянием является важным аспектом разработки всех веб-приложений. До сих пор область управления состоянием React была монополизирована Redux: хорошо написанной библиотекой управления состоянием почти для всех крупномасштабных приложений React.

Несмотря на то, что Redux на протяжении многих лет предлагал простые плагины, такие как Redux Toolkit, в ранних версиях Redux разработчики всегда боролись с ручной процедурой изменения глобальных состояний путем создания глобального хранилища данных и подключения каждого компонента для его использования.

Recoil — гораздо более простое решение для управления состоянием, написанное для приложений React. В этой статье мы рассмотрим, как Recoil пытается улучшить управление состоянием для приложений React.

Что такое откат?

Recoil — это библиотека, написанная Facebook для управления состояниями в React. Хотя он все еще находится в зачаточном состоянии, он кажется многообещающим инструментом для разработчиков React, упрощающим глобальное управление состоянием. На мой взгляд, он обладает всеми возможностями существующих библиотек управления состоянием, но гораздо более удобен для пользователя и привлекателен для разработчиков React.

Концепции отдачи

Отдача имеет два ключевых понятия:

Атомы

С Recoil источник истины в состоянии нашего приложения содержится в атомах.

Атомы являются как обновляемыми, так и подписываемыми единицами состояния. В результате все подписанные компоненты перерисовываются с новым значением при обновлении атома. Их также можно создавать в режиме реального времени. Поэтому состояния локальных компонентов React можно легко заменить атомами.

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

Пример атома.

const booksListState= atom({
 key: 'BooksList',
 default: [],
});

Оборачивая элемент в JSX-подобную структуру с помощью тега ‹RecoilRoot›, он получает доступ к атомам.

ReactDom.render(
 <RecoilRoot><App /></RecoilRoot>,
 document.getElementById('root')
);

Примечание: обратитесь к этому руководству для более глубокого понимания атомов отдачи.

Селекторы

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

Селекторы могут «выбирать» атомы, просматривать состояние, хранящееся в атоме, и возвращать измененное состояние, которое вызовет повторную визуализацию элемента.

const booksListFilterState = atom({
 key: 'BooksListFilter',
 default: 'Show All',
});

Используя booksListFilterState и booksListState, мы можем создать селектор filteredBooksListState, который создает отфильтрованный список.

const filteredBooksListState = selector({
  key: 'FilteredBooksList',
  get: ({get}) => {
    const filter = get(booksListFilterState );
    const list = get(booksListState);
    
    switch (filter) {
      case 'Show Completed':
        return list.filter((item) => item.isComplete);
      case 'Show Uncompleted':
        return list.filter((item) => !item.isComplete);
      default:
        return list;
      }
    },
});

Примечание. Обратитесь к этому руководству для получения дополнительной информации о селекторах отдачи.

Что отличает отдачу?

Recoil имеет уникальные преимущества по сравнению с другими библиотеками управления состоянием, используемыми для приложений React.

Следующие функции отличают Recoil от других подобных библиотек:

Меньше шаблонов.
Простой в освоении и понимании.
Поток данных прост для понимания.
Больше соответствует React.
Асинхронные данные запрашиваются с использованием чистых функций.
Хуки помогают нам получать и обновлять состояния.

Отдача против Redux (API)

Обе библиотеки требуют, чтобы вы обернули свое приложение компонентом поставщика.
Recoil позволяет вам использовать atom() для инициализации хранилища, которое также включает в себя селектор и диспетчерское действие. Однако в Redux мы можем создать хранилище с помощью createSlice() и configureStore(), но нам нужно определить селектор независимо.
Любой компонент React может использовать состояние (хранящееся в атомах) с Recoil.

Является ли Recoil лучшей альтернативой Redux?

На мой взгляд, Recoil не заменяет Redux. Однако вы можете воссоздать шаблоны Redux, используя атомы и селекторы Recoil.

Отдача не является ответом на каждый аспект управления состоянием

Основная роль Recoil заключается в решении очень специфической проблемы. Это может помочь вам повысить производительность, если у вас есть большое количество взаимозависимых компонентов.

Redux, с другой стороны, более общий. Это даже не специфично для React.

Отдача большая по размеру

Отдача = 1,98 МБ
Redux+ React-Redux = 627 КБ

Отдача намного больше, чем у Redux. Это становится серьезной проблемой во многих случаях, особенно когда размер пакета имеет решающее значение.

Многие крупномасштабные проекты используют Redux вместо Recoil

Многие крупные проекты уже используют Redux. Он имеет большую поддержку сообщества и возможности для управления крупномасштабными приложениями с помощью фрагментов и других утилит, таких как Redux-Toolkit, что значительно упрощает рабочий процесс Redux.

В Recoil есть инструменты для поддержки крупномасштабных приложений, но они мало используются разработчиками React. В будущем Recoil станет хорошим подспорьем, если вы захотите использовать его для большого приложения, поскольку он включает в себя инструменты, которые вам понадобятся для запроса данных из API, в том числе:

Асинхронные селекторы
саспенс
useRecoilCallback
selectorFamily
атомСемья

Плюсы и минусы отдачи

Плюсы

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

Минусы

Нет поддержки промежуточного программного обеспечения. На данный момент Recoil не поддерживает промежуточное ПО.

Заворачивать

Для простоты и совместимости разработчики предпочитают использовать встроенные функции управления состоянием React, а не внешнее глобальное состояние. Однако эти встроенные решения имеют некоторые недостатки:

Context API может сохранить только одно значение.
Мы не можем поделиться состоянием компонента.
Эти проблемы делают отделение кода вершины дерева (где находятся состояния) от листьев (где используются состояния) еще более сложной задачей.

В этой статье подробно рассказывается о том, как Recoil пытается решить все эти проблемы с помощью атомов и селекторов.

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

Я надеюсь, что эта статья была полезна для понимания ключевых концепций Recoil.

Пакет Syncfusion Essential Studio for React предлагает более 70 высокопроизводительных, легких, модульных и адаптивных компонентов пользовательского интерфейса в одном пакете. Это единственный пакет, который вам когда-либо понадобится для создания полноценного приложения.

Если у вас есть вопросы, вы можете связаться с нами через наш форум поддержки, портал поддержки или портал обратной связи. Мы всегда рады Вам помочь!

Связанные блоги

Первоначально опубликовано на https://www.syncfusion.com 25 июля 2022 г.

Recoil: будущее управления состоянием для React?