Recoil - экспериментальная библиотека управления состоянием Facebook для React

Recoil - экспериментальная библиотека управления состоянием Facebook для React

Во время ознакомления с основными моментами React Europe 2020 я обратил внимание на эту библиотеку.

Recoil, минимальная, быстрая и гибкая библиотека управления состоянием, которая имеет Reactish API, семантику и поведение. Сотрудники Facebook использовали эту библиотеку внутри компании для работы с приложениями, ориентированными на производительность.

Как это работает?

Recoil позволяет вам обмениваться данными от атомов (общее состояние), которые проходят через селекторы (чистые функции) вниз в компоненты React. Атомы - это единицы состояния, на которые могут подписываться компоненты. Селекторы преобразуют это состояние синхронно или асинхронно.

Что такое атомы?

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

Что такое селекторы?

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

Не поняли, что такое атомы и селекторы? Не понял, как они работают? Давайте посмотрим на пример ниже, чтобы увидеть, как это работает.

Пример использования отдачи

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

Установка

Создайте новое приложение для реагирования и установите пакет recoil.

npm install recoil
// or 
yarn add recoil

Структура папки

/* Main app file */
// App.js
/* State atoms and selectors */
// recoilState.js
/* To-do Components */
// TodoItem.js
// TodoItemCreator.js
// TodoList.js
// TodoListFilters.js

Давайте создадим атом todoListState, который будет содержать список задач с пустым массивом в качестве значения по умолчанию. Добавьте еще один атом todoListFilterState, чтобы сохранить состояние фильтрации для задач, где мы показываем их все по умолчанию. todoListState и todoListFilterState - это атомы, которые будут хранить состояние дел.

filteredTodoListState - это функция-селектор, которая будет иметь функцию get в качестве аргумента и будет прослушивать изменения в todoListState и todoListFilterState. Итак, когда любой из этих атомов обновляется из любого места в приложении, селектор будет переоценивать, в нашем случае блок переключателя, который будет фильтровать наши задачи.

В TodoItemCreator.js импортируйте useSetRecoilState из recoil, чтобы добавить новые элементы в список дел, и передайте todoListState в качестве аргумента. Каждый раз, когда пользователь нажимает кнопку «Добавить», новая задача добавляется в список в функции addItem.

Компонент TodoItem будет отображать значение элемента задачи, позволяя вам изменить его текст и удалить элемент. Мы используем useRecoilState() для чтения todoListState и получения функции установки, которую мы используем для обновления текста элемента, отметки его как завершенного и удаления.

Давайте добавим раскрывающийся список для фильтрации наших задач и передадим todoListFilterState в качестве аргумента useRecoilState. Это позволяет нам изменять состояние фильтра, что автоматически запускает filteredTodoListState и запускает блок переключения для фильтрации задач.

Теперь мы добавляем TodoItem.js, TodoItemCreator.js и TodoListFilters.js к TodoList.js. Чтобы получить отфильтрованные задачи, импортируйте useRecoilValue из recoil и передайте filteredTodoListState из recoilState в качестве аргумента.

Импортируйте RecoilRoot из recoil и оберните им все приложение в App.js. Добавьте компонент TodoList и вуаля, вы сделали базовое приложение со списком дел с помощью Recoil.

Мысли о первом использовании

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

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

Пока рано говорить, изменит ли Recoil игру и заменит Redux, поскольку он все еще находится на экспериментальной стадии, и может произойти множество изменений и улучшений API.

Хотите сами попробовать Recoil? "Кликните сюда"!

Подпишитесь на меня на Dribbble, чтобы получать еженедельные вдохновляющие дизайны! Вы также можете связаться со мной в LinkedIn!