Хаос управления состоянием React, горизонтальное сравнение Dva, Rematch, Mirror

React.js
Хаос управления состоянием React, горизонтальное сравнение Dva, Rematch, Mirror

В эти дни фреймворк управления состоянием Redux летает по всему небу.Несколько дней назад я наткнулся в Интернете и нашел Rematch, Mirror, Smox и Xredux.Я использовал их все и обнаружил, что все они фарфоровые куклы .

Просто что-то вроде этого:

model({
    state: ...,
    reducers: {
        aaa(playload)
        bbb(playload)
    },
    effects: {
        ccc(playload)
        ddd(playload)
    }
})

无聊

Эстетическая усталость? Привет, всем рекомендую небольшую свежую свининуReact-coat:

адрес проекта:GitHub.com/Моя линия/Горячие…

class ModuleHandlers extends BaseModuleHandlers {
  @reducer
  public aaa(playload): State {...}

  @reducer
  private bbb(playload): State {...}

  @effect("ajaxLoading")
  public async ccc(playload) {...}

  @effect("loginLoading")
  private async ddd(playload) {...}
}

весенний стиль? нг стиль?

小鲜肉

Может быть, вы скажете, используйте Class, не нравится, мне нравится стиль FP. Я хотел бы сказать, что это фреймворк управления состоянием, а не фреймворк React UI. зверь.

Рефлекс типа TS вооружён до зубов

React-coat полностью поддерживает Typescript, прямо над ним:

Введите отражение, когда Action вызывает:

Введите отражение при динамической загрузке модулей:

Отражение типа для структуры Store State:

Даже параметры маршрута имеют отражение типа:

小鲜肉

Поддерживает одностраничный SPA и изоморфизм SSR, отображаемый на сервере.

  • а такжеSSR также можно использовать во время разработки: «Горячие обновления».
  • Он также поддерживает переключение одним щелчком мыши между SPA (одна страница) + SSR (рендеринг сервера).

Откройте ./package.json в корне проекта, в элементе «devServer» установите для ssr значение true, чтобы включить рендеринг сервера, и false, чтобы использовать рендеринг только браузера.

Пожалуйста, перейдите к другой статье о серверном рендеринге SSR:nuggets.capable/post/684490…

小鲜肉

Мощный и удобный диспетчер действий

Сравните синтаксис Dispatch Action основных фреймворков:

// Dva中
yield put({type: 'moduleA/increment',  payload: 2});

// Rematch中
dispatch.moduleA.increment(2);

// Mirror中
actions.moduleA.increment(2);

// React-coat中
import moduleA from "modules/moduleA/facade";
...
await this.dispatch(moduleA.actions.increment(2));

  • С точки зрения грамматической простоты доходность, поставленная в сагу, используемую DVA, и написание типа и полезной нагрузки являются наиболее громоздкими. Другие три называются непосредственно методом, что более лаконично.

  • Rematch и Mirror эквивалентны помещению всех действий в глобальную переменную, в то время как React-coatдецентрализация, импортировать модули по мере необходимости,更利于系统保持松散结构.

  • Семантически React-coat по-прежнему показывает зарезервированное ключевое слово dispatch,moduleA.actions.increment(2)Возвращение по-прежнему Действие,dispatch(action)Поскольку основная идея Redux была полностью сохранена, Rematch и Mirror стали традиционными MVC.

  • Функционально поддерживаются только Dva и React同步 effect. Два других не поддерживаются, или я не нашел? Что такое синхронный эффект? Например:

    • запрос вызовет эффект, updateState вызовет редуктор
    • updateState должен дождаться выполнения запроса перед отправкой
    // Dva中使用 saga 的 put.resolve 来支持同步 effect
yield put.resolve({type: 'query',payload:1});
yield put({type: 'updateState',  payload: 2});

    // React-coat 中可以直接 awiat dispatch
await this.dispatch(thisModule.actions.query(1));
this.dispatch(thisModule.actions.updateState(2));

  • Уникальный убийца React-coat: отражение типов и интеллектуальное подсказывание имен и параметров действий, а также контроль общедоступных и частных разрешений позволяют вам почувствовать, что такое настоящая инкапсуляция. Представьте, если несколько человек параллельно разрабатывают несколько модулей, вам все равно нужно писать большую документацию по API для ваших модулей?

小鲜肉

Полностью модульный

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

В приведенных выше фреймворках модульные функции Rematch и Mirror относительно слабы и неэлегантны, поэтому пропустите их. И Dva, и React-coat имеют мощные модульные функции, где Dva можно автоматически настроить с помощью UMI.

Динамическая загрузка моделей и компонентов в dva зависит от конфигурации маршрутизации:

{
  path: '/user',
  models: () => [import(/* webpackChunkName: 'userModel' */'./pages/users/model.js')],
  component: () => import(/* webpackChunkName: 'userPage' */'./pages/users/page.js'),
}

Разделение кода и маршрутизация в React-coat управляются слоями:

  • Разделение кода выполняет только разделение кода и не включает маршрутизацию, поскольку модули не обязательно должны загружаться маршрутизацией.
  • Маршрутизация выполняет только маршрутизацию и не участвует в разделении кода, поскольку модули не обязательно должны выполнять разделение кода.
  • Модуль упаковывается в бандл как единое целое, включая модель и представления, чтобы он не был слишком фрагментирован.
// 定义代码分割
export const moduleGetter = {
  app: () => {
    return import(/* webpackChunkName: "app" */ "modules/app");
  },
  photos: () => {
    return import(/* webpackChunkName: "photos" */ "modules/photos");
  },
}

Маршрутизация React-coat поддерживает динамическую загрузку, а также поддерживает динамическую загрузку без маршрутизации

// 使用路由加载：
const PhotosView = loadView(moduleGetter, ModuleNames.photos, "Main");
...
<Route exact={false} path="/photos" component={PhotosView} />

// 直接加载：
const PhotosView = loadView(moduleGetter, ModuleNames.photos, "Main");
...
render() {
  const {showDetails} = this.props;
  return showDetails ? <DetailsView /> : <ListView />;
}
  • Dva делит модули по основной линейке Page UI, React-coat делит модули по бизнес-функциямВысокая сплоченность, низкая связанностьразделить модули. Последний больше подходит для развязки и повторного использования.
  • Dva использует централизованную конфигурацию и записывает страницу, маршрутизацию, модель и сегментацию кода в один центральный файл;Реагировать на децентрализацию, инкапсулировать соответствующую логику в соответствующих модулях, а модель, разделение кода и маршрутизация управляются иерархически, не мешая друг другу. Последний чище и аккуратнее.
  • Dva делает каждую модель и компонент пакетом сегментации кода, React-coat превращает модуль в целом в пакет сегментации кода, первый слишком фрагментирован, а второй больше соответствует концепции бандла.
  • Реагистрационное покрытие поддерживает динамическую загрузку просмотров путем маршрутизации, а также поддерживает динамическую загрузку просмотров путем не маршрутизации и прогулки по двум ногам и занимает большие шаги.
  • Когда React-coat динамически загружает представление, он автоматически импортирует модель, и нет необходимости вручную настраивать и загружать модель — это реальная компонентизация маршрута.

Для получения дополнительных различий см.:Поговорите с DvaJS, претендентом на DvaJS? Или еще раунд?

小鲜肉

Межмодульный вызов и совместная работа

В сложных долгосрочных бизнес-процессах межмодульный вызов и совместная работа незаменимы.Dva, Rematch, Mirror и React-coat поддерживают межмодульную диспетчеризацию действий и межмодульное чтение состояния. Например:

// Mirror中
if(resphonse.success){
    actions.moduleA.doSomeEffect();
    actions.moduleB.doSomeEffect();
}

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

Сценарий: когда модуль A выполняет действие, модуль B, модуль C, модуль D... все должны выполнять свои собственные действия.

Это убийственная особенность, уникальная для React-coat: концепция ActionHandler.

class ModuleB {
    //在ModuleB中监听"ModuleA/update" action
    async ["ModuleA/update"] (){
        await this.dispatch(this.action.featchData())
    }
}

class ModuleC {
    //在ModuleC中监听"ModuleA/update" action
    async ["ModuleA/update"] (){
        await this.dispatch(this.action.featchData())
    }
}

React-coat поддерживает как активный вызов, так и режимы трансляции событий, как б/у, так и б/у тяжело. Просто спросите, злитесь вы или нет? 😂

Категории