Минималистичное управление состоянием (React)

Минималистичное управление состоянием (React)

От автора: React версии 16.3 представил новый API контекста. На мой взгляд, эта новая функция достаточно хороша для управления состоянием небольших и средних приложений. Недавно я написал небольшой проект, в котором использовал контекст в качестве основного источника данных для front-end. В этом посте я хотел бы поделиться полученными знаниями и подходом.

Новый API

Давайте бегло вспомним основные моменты.

Создает новый контекст. Можно иметь несколько контекстов с разными данными.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Принимает свойство ‘value’. Будет перерисовывать все связанные потребители при изменении данных.

Имеет доступ к данным провайдера. Существует два способа доступа потребителя к данным:

1:

2:

Разница между новым и старым API

В старом API PureComponents и компоненты, которые реализовались shouldComponentUpdate, перерисовывались при изменении свойства или состояния. React не учитывает значение контекста. Такое поведение приводит к устареванию данных в контексте.

Вот пример использования старого API:

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Измените компонент Title для расширения PureComponent. Нажмите «Increment» несколько раз. <Title/> не будет перерисован, но значение контекста изменилось.

Минималистичное управление состоянием

Как я уже говорил, я использовал новый React Context API для управления состоянием в проекте. Почему я не использовал redux?

Во-первых, redux не нужен для небольших проектов. Просто представьте — действия, редукторы, резервирование для e2e-связи, connect(), объединение редукторов.

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

Такая реализация покрывала все мои потребности. Но в какой-то момент я понял, что существует более 300 строк кода, чего вполне достаточно.

Поэтому я решил разделить данные в зависимости от их типа — Пользователь, Сообщения, Товары, Тема. Я постараюсь, чтобы пример оставался максимально простым. Сначала я переместил все пользовательские данные из состояния Store в отдельный класс:

Каждая модель получает два важных параметра. getState — этот метод возвращает this.state компонента Store. rootUpdater — это метод this.setState из компонента Store. Затем я переделал компонент Store:

Представьте себе ситуацию, когда одной из моделей необходимо выполнить некоторые вычисления в зависимости от значений внутри другой модели. В обход метода this.getState каждая модель имеет доступ ко всему дереву данных. Вот полный пример:

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

Автор: Andrew Palatnyi

Источник: https://itnext.io

Редакция: Команда webformyself.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий