В приложениях React управление состоянием является неизбежной темой.Для разработчиков, как изящно управлять состоянием, это более сложная вещь, чем можно себе представить, и это настоящее искусство разработки.
Зачем нужно государственное управление
Как мы все знаем, приложение React состоит из конечных автоматов, компоненты — это ядро приложения React, а состояние — это душа одного или нескольких компонентов. Для сформированного React-приложения компоненты образуют скелет приложения, а состояние — это кровь, которая течет по всему телу и является залогом жизнеспособности и живучести приложения.
По мере того, как приложения становятся все более сложными, может быть крайне сложно определить, какие именно компоненты нуждаются в состоянии. Если вы сохраняете все состояние в корневом компоненте, передайтеcontext apiЭто не простой способ потребления состояния. Но это не решает проблему эффективно, потому что нам нужно не только передатьsetStateДетальный контроль изменений состояния и проектирование обмена данными между компонентами. После плохой разработки управление состоянием может стать хаотичным, а изменения состояния могут стать непредсказуемыми, поскольку их невозможно отследить.
Внешнее управление состоянием Redux
Как самое популярное решение для управления состоянием в сообществе, Redux предоставляет нам предсказуемый контейнер состояния. В Redux состояние приложения хранится в объекте js как единый источник данных, который можно получить в любое время. Сосредоточение нашего внимания на этом объекте исключает затраты на разработку и обслуживание других звеньев. И состояние приложения "только для чтения", и состояние не может быть изменено напрямую. Единственный способ изменить состояние — отправить соответствующее действие (action) соответствующей чистой функции (reducer) для обновления состояния, а затем вернуть новый объект состояния, который будет отображаться страницей.
Благодаря вышеупомянутым соглашениям в Redux каждое изменение состояния отслеживается и хорошо документируется, что чрезвычайно важно для нашего опыта программирования управления состоянием, обслуживания кода и последующего устранения ошибок. Redux сама по себе является системой публикации по подписке, и конкретный внутренний процесс обработки выглядит следующим образом:
Является ли Redux оптимальным?
Redux действительно упрощает и рационализирует управление состоянием, но, будучи бережливой библиотекой, он имеет крутую кривую обучения, сложные концепции функционального программирования и запутанные концепции, которые отпугивают многих разработчиков. А в реальной разработке разработка и сопровождение Redux тоже очень громоздкое и хлопотное дело.
Шон Маккей, автор Rematch,«Переработка Редукса»Есть 6 возможных улучшений Redux, но их можно обобщить как следующие 3 пункта:
- концепции функционального программирования
- Шаблонами сложно управлять (требуется переключение между редюсером, сагой, экшеном)
- Асинхронное решение проблем
Вышеуказанные проблемы кажутся общими, но они тесно связаны с нашим привычным управлением состоянием. Из-за этих проблем Redux не только не повысит эффективность нашей работы, но даже снизит ее. Но идея управления состоянием Redux верна, и реальный проект тоже нуждается в этой идее. Поэтому, чтобы лучше использовать Redux и снизить затраты на его обучение и использование, нам срочно нужны передовые практики, основанные на Redux.
Лучшая практика DVA
По мере углубления использования Redux инженерные проблемы, которые он выявляет, становятся все более серьезными. В сообществе есть много решений инженерных проблем Redux, среди которых самой яркой звездой является Dva, которую индустрия называет лучшей практикой, основанной на Redux.
Dva — это легкий пакет, основанный на существующей архитектуре приложений Redux (redux + react-router + redux-saga и т. д.), помогающий нам автоматизировать утомительные шаги в архитектуре Redux, такие как обслуживание шаблонного кода, создание хранилища и промежуточное ПО. , громоздкие и подверженные ошибкам шаги, а также использует краткий и понятный API для настройки и управления.
концепции функционального программирования
Эта часть проблемы в основном сосредоточена на инициализации Redux.Dva решает проблему комбинации функций инициализации с помощью конфигурации объекта, как показано на рисунке:
шаблонный
На шаблоне Dva решает только автоматическое управление редуктором и шаблоном redux-saga и не решает стандартное управление действием, так что это также недостаток Dva.
model 是 Dva 的重要概念，对 Redux 社区有着不小的影响，它将 Redux 下的每一个子状态的下的 state、reducer 和 sagas 都写在一起，通过对象配置的方式使 Redux 样板文件的管理思路清晰简单。 Вот простой пример:
Dva делит действие на синхронное действие и асинхронное действие.Метод обработки синхронного действия определяется в атрибуте reducers, который является единственным местом, где можно обновить состояние. Обработчики асинхронных действий определяются в свойстве Effects, также можно отправлять синхронные действия.
При регистрации модели Dva создаст редукторы в соответствии с методом, определенным в редьюсерах, и создаст побочные эффекты саги в соответствии с методом, определенным в Effects.
Асинхронное решение проблем
Для обработки асинхронных действий Dva выбрала redux-saga. Redux-saga упрощает управление побочными эффектами, повышает эффективность выполнения, упрощает тестирование и упрощает обработку сбоев. Определение асинхронных методов с помощью генераторов упрощает чтение и запись асинхронных процессов, а также упрощает тестирование асинхронных процессов и поддержание чистоты действий.
Механизм плагина
Решая проблему разработки Redux, Dva предоставляет гибкий механизм подключаемых модулей, позволяющий разработчикам углубиться в каждую часть обработки потока данных Redux, еще больше повышая гибкость кода и эффективность работы.
Два совершенна?
Несмотря на то, что это считается лучшей практикой, Двава все же имеет следующие недостатки из-за объективных факторов и ограничений:
- Лично поддерживаемые проекты, с точки зрения участников, почти все вносятся одним автором, они вовремя не отреагировали на текущие популярные технологии (такие как react hook) и давно не обновляли новые функции.
- Два это не нулевой шаблон (шаблон) Передовая практика Redux, есть еще
actionTypes,actionCreatorsСопутствующее техническое обслуживание
матч-реванш восходящей звезды
После Dva в сообществе появилось множество фреймворков управления состоянием на основе инкапсуляции Redux, но большинство из них имели не малые ограничения, да и пошли назад, пока появление rematch не заставило людей блистать. rematch — вдохновленная Dva практика Redux без шаблонов, похожая по стилю на vuex.
Rematch также использует решение «конфигурация + модель», которое более просто инкапсулирует практику избыточности. С точки зрения дизайна рематч все же несколько отличается от Два, давайте рассмотрим полный пример:
Отличие rematch от Dva в том, что rematch — это всего лишь фреймворк управления состоянием, который отвечает только за управление состоянием, и больше ничего, встроенных библиотек не так уж и много. Кроме того, для создания приложения требуется меньше шагов, количество ненужных процедурных вызовов сокращается, а функции никогда не вызываются через конфигурацию.
С точки зрения общего стиля использования, rematch является более легким, redcuer, saga и action единообразно поддерживаются моделью, а определение redcuers объединяется в одно.actionCreatorа такжеactionTypeПосле определения действия могут быть напрямую отправлены через доступ к свойствам объекта, что сокращает шаблонный код и значительно снижает стоимость нашего кода.
В асинхронных задачах рематч используетasync/awaitЗаменятьredux-sagaа такжеthunkРешение снижает затраты на понимание и использование асинхронной обработки действий.
Что касается экологии подключаемых модулей, в матче-реванше относительно сильна экологическая концепция подключаемых модулей.reselect,persist,immerи т. д. интегрированы в виде плагинов. Есть возможности для дальнейшего развития в области кэширования данных, оптимизации производительности и оптимизации опыта разработки.В конце концов, использование экологии плагинов — это хорошее направление развития.
лучший каркасный нож
От Redux до Dva, а затем повторного сопоставления, мы можем видеть прогресс от косой черты и записи до разработки автоматизированного Redux, управления состоянием легко и эффективно, но всегда лучшая практика заключается в том, чтобы в основном инкапсулировать Redux, предоставляя более простой В то же время без потери каких-либо из API возможности настройки.
Когда мы видим прогресс сообщества, мы также чувствуем себя немного беспомощными. Где беспомощный? То есть, глядя на такой ароматный и эффективный инструмент, возникает большой пробел при попытке миграции с существующей структуры управления состоянием на новую структуру управления. Например, если мы хотим перейти от существующей архитектуры приложения Redux (redux + react-router + redux-saga) к rematch, мы должны отказаться от redux-saga и изменить наше исходное решение для асинхронной обработки, что связано с большими затратами на миграцию. Таким образом, текущая ситуация автоматизации новых проектов и истощения старых проектов была вызвана. Это не то, что мы хотим видеть и не хотим видеть.
Вдохновленный Dva, rematch, можно сказать, инкапсулировал Redux до предела, но это только решение проблемы разработки Redux, и в реальном бизнес-коде управления состоянием все еще есть объективное пространство для оптимизации, например: пакетное создание методов обработки действий.
Тан нож
Чтобы как можно больше проектов (новых и старых проектов) могли использовать ту же структуру управления состоянием, что и rematch, чтобы максимизировать эффективность НИОКР и снизить затраты на НИОКР, мы решили перестроить структуру управления состоянием на основе Redux.
Наша фронтенд-команда Maoyan провела долгосрочное исследование и анализ существующих решений в сообществе и в сочетании с реальной ситуацией и решила сохранить существующую архитектуру приложения Redux (redux + react-router + redux-saga), чтобы достичь более низких затрат на обучение и запуск. , может сосуществовать с родным управлением потоком данных с избыточностью, структура управления состоянием Dva легко мигрирует, а повторное соответствие является целью быстрой миграции. Реагирующий хук включен в последующее планирование, а управление состоянием окружающей среды на основе версии реагирующего хука подготовлено для дальнейшего улучшения возможностей управления состоянием.
После длительного периода разработки и многочисленных оптимизаций мы, наконец, создали фреймворк управления состоянием, отвечающий вышеуказанным требованиям и имеющий определенные оптимизации в бизнес-коде — Tang Dao.
Tangdao - это инструмент управления потоком данных, который опирается на сущность DVA и REDATCH. Он имеет нулевую бойную табличку, богатую экологию плагина и может сосуществовать с собственным методам управления потоком потока Redux. Проекты DVA могут быть беспрепятственно перенесены, проекты REMAST могут быть быстро перенесены И деловой код значительную оптимизацию было сделано значительно повысить эффективность управления государством. Давайте посмотрим на полный пример Tang Dao:
Чтобы обеспечить плавную миграцию проектов Dva, Tangdao в основном соответствует Dva в концепции дизайна и дизайне API.Перевод поддерживает основные функции Dva и вносит исправления и дополнения для недостатков Dva, сокращая обучение и запуск. рост расходов пользователей Dva. . Опираясь на rematch в управлении шаблонами и распределении действий, он обеспечивает возможность и гарантию быстрой миграции проектов Dva и rematch проектов в Tangdao.
Выбор между Generator и async/await
При высокой инкапсуляции фреймворка для пользователяGeneratorа такжеasync/awaitЭто просто разница в синтаксическом сахаре.Метод написания другой, но функция та же.Создание побочных эффектов саг реализовано внутри Tangdao, и разработчики не знают об этом. Поэтому для пользователей-рематчей эта часть отличается только написанием, и особо менять ее не нужно, кроме этого, других отличий нет.
инициализация
Чтобы быть совместимым с управлением потоком данных REDUX, нож Tang предоставляет связанные свойства для настройки различных инструментов в архитектуре REDUX при инициализации. Это может достигать первого доступа и посттрансформации. детали следующим образом:
Через конфигурация атрибута вам не нужно заботиться и понять фактический процесс вызова этих атрибутов вообще, обеспечивая возможность быстрого доступа к проекту.
плагин
Tangdao также активно внедряет экологию подключаемых модулей. В будущем мы также планируем создать окружающую среду на основе хука реагирования для улучшения управления потоками данных. В настоящее время Tangdao имеет встроенные и предоставляет следующие подключаемые модули:
- загружая плагин, вы можете настроить управление статусом асинхронного запроса и статусом отложенного асинхронного запроса
- Плагин effectThunk может возвращать промисы при отправке асинхронных действий, позволяя вам получать результаты асинхронных запросов за один шаг.
- Плагин nextTick может выполнять отложенные обратные вызовы после завершения следующего цикла обновления DOM. Используйте этот метод сразу после отправки действия, чтобы получить обновленный DOM и последний store.state.
В связанном бизнес-коде управления состоянием для методов обработки действий с одним и тем же методом записи, но разными атрибутами Tangdao предоставляет атрибут создания методов обработки действий в пакетах, что делает код вашей модели тоньше и пишет меньше кода. детали следующим образом:
Из приведенного выше сравнения видно, что Тан Дао хочет не только упростить и эффективно управлять состоянием, но и максимально учитывать миграцию существующих решений, чтобы как можно больше проектов включало простое и эффективное управление состоянием. . В процессе мы не обесценивали ни одно решение и старались максимально использовать лучшее из ста школ, чтобы принять простую философию Redux при более низкой стоимости обучения, меньшем количестве шаблонного кода и меньшей стоимости обучения.
Если вы все еще страдаете от избыточной архитектуры или других инструментов управления состоянием,Тогда попробуйте нож Тан, возможно, это принесет вам неожиданную прибыль, сердцебиение хуже, чем действие, раннее использование и ранний выпуск.
В конце концов, редактор продает себя, чтобы выпросить звезду, а младшие братья и сестры дают мне ее!
Гитхаб:Github.com/mao y tech / ...