написать впереди

Прошло более полугода с тех пор, как я познакомился с ES6 и стеком технологий umi в июле 2020 года.

В начале, чтобы завершить проект учителя, я целенаправленно научился использовать react+antd в umi для написания jsx-страницы и использовать dva для реализации потока данных и логики обработки модели, даже архитектура MVVM была совершенно непонятна. будет только следить за проектом на Yuque, как модель реализованная dva привязывается к jsx компоненту, и как компонент получает состояние в модели, эти вещи совершенно неизвестны.

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

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

Если есть плохое место для записи, но также, пожалуйста, поправьте меня, старший брат, я не могу гарантировать, что их понимание также должно исправить T _ T, также надеюсь научиться здесь более медленному прогрессу!

1. React

Что такое Реакт? Взгляните на описание React на официальном сайте:

РЕАКТ - это библиотека JavaScript для построения пользовательских интерфейсов.

Особенности реакции:

Деклариватор: Реагирование делает создание интерактивного интерфейса UI. Простая конструкция View для каждого состояния вашего приложения, реагирует эффективно обновлять и регулярно рендерировать при изменении данных компонента. Чтобы написать декларативный пользовательский интерфейс, вы можете сделать свой код более надежным и простым в отладке.

Что касается третьего пункта, поскольку у меня была только передняя сторона веб-разработки на ПК, единственный доступ к этому набору технологий umi + dva, так что это понимание не очень глубоко.

React — это библиотека JavaScript. Ее основная функция — позволить нам создавать узлы DOM в js, которые в конечном итоге отображаются на странице. В реакции это называется компонентом. Простейшие компоненты, такие как

const element = <h1>Hello, world!</h1>;

Это можно назвать компонентом, такой подход называется JSX. Что хорошего, как это написано, представьте, если есть оказание в заголовке DIV десять H1, текст заголовка, 1-10, если оригинальный HTML шаблон для записи, как написать не нужно писать честно 10 H1 , или есть способ, в последней записи HTML SRCITP, после рендеринга DIV хорошего выбора в этот Div, затем цикла для создания используемого h1, а затем вставлена в div в 10 циклах. Как написать это (УМИ) в JSX будет.

import React;

const Index = (props) => {
    const arr = [];
    for(let i = 1;i<=10;i++){
        arr.push(i)
    }
    ...

    return(
        <div>   
        {
            arr.map(item => (
                return(<h1>{item}</h1>)
            ))
        }
        </div>
    )
};

export default Index;

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

После того, как мы инкапсулируем компоненты в классы, React на самом деле очень понятен: в нем будет часть кода, отвечающая за отрисовку элемента, то есть jsx-код в отдаче, а затем будет часть кода для обработки данные внутри компонента.То есть логика props и state, то есть другой код в этом классе.

Одним словом, когда я впервые начал изучать React, я использовал Class для написания компонентов, но, прочитав код antd, я обнаружил, что метод использования стрелочных функций действительно проще и читабельнее, а код более читабелен. В середине был период смешанного использования классов и стрелочных функций. Если вы можете использовать стрелочные функции вместо классов, то это скорее из-за появления хуков React. Этот хук, особенно useState, позволяет стрелочным функциям без этого устанавливать состояние. На самом деле, кроме хуков useState и useEffect, другие хуки используются редко, а == практически никогда не используется.

Сказав так много, я на самом деле хочу сказать, что когда js-код можно будет использовать для непосредственной обработки html-элементов, будет удобнее взаимодействовать с компонентами страницы и контролировать обновления компонентов.После инкапсуляции компонентов с объектно-ориентированными идеями отдельные части на странице. , а отдельная обработка собственной внутренней логики также делает код удобным для сопровождения и более читабельным.

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

Здесь == упомянуть рот, как массив ах, ах объекты такие опорные типы, мы можем подумать, что добавить элемент удалить элемент элемента обновления ARM изменить, и изменить элементы на самом деле JS ссылки должны быть изменяющимися памятью Адрес, что означает, что он судит вам, это не новый справочный элемент, будет видеть только адрес, только что не увидит значение, чтобы применил компоненты управления состоянием, то компонент должен быть обновлен, хочу запускать каждый раз нарезки после обновленного и назначен каждый раз. приостановить.

Таких контрольных точек по-прежнему много. Например, таблица таблица таблица таблица Таблица — это данные, отображаемые в таблице. ; например, отображение дисплея, вы можете написатьstyle = dp === 0 ? 'block' : 'none', вы можете использовать значение dp, чтобы контролировать, существует ли элемент или исчезает.Этот dp должен быть состоянием или реквизитом.

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

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

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

Redux — это контейнер состояния JavaScript, обеспечивающий предсказуемое управление состоянием.

2. Redux

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

Три принципа Redux:

Единственный источник правды: состояние всего приложения хранится в дереве объектов, и это дерево объектов существует только в одном хранилище.

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

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

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

Вот это приложение придумало решение.Давай я построю склад.У этого склада много комнат.Разложи все состояния по своим комнатам.Какие состояния нужны для каких страниц взяты со склада.Это единственное из три принципа Источник данных, все состояние будет помещено в хранилище для единого управления.

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

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

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

Теперь давайте посмотрим на пример, воспроизведенный изwoohoo.yuque.com/flying.you/he…

Пример фона — один из наиболее распространенных примеров веб-класса: TodoList = список задач + кнопка «Добавить задачу».

Это схема страницы, созданной React. Компонент верхнего уровня страницы называется App, а внизу есть TodoList и кнопка добавления:

Посмотрите на диаграмму после использования redux:

Нашли разницу?Статус приложения был вынут и помещен в комнату в Магазине.Я не назвал эту комнату потому что она всего одна.Ключ этой комнаты находится в редюсерах ниже,и только один в редьюсерах вызывается.Функция может модифицировать состояние, как его вызвать, то есть синий квадрат Dispatch, который соединяет компонент в странице со складом.

Dispatch принимает параметр, который представляет собой действие, не описанное выше. Действие — это объект с двумя атрибутами. Первый — это тип. Чтобы использовать имя редуктора в редюсерах, необходимо передать второй параметр — данные.

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

Роль Redux теперь ясна, это инструмент управления для всех страниц. Он тезирует государственную и государственную логику модификации всех страниц и контролирует поток данных только в одном направлении.

3. Redux-Saga

Generatorфункция, если вы ее не понимаете, вы можете посмотреть учебник Ruan Yifeng по ES6. Каждая сага представляет собой функцию-генератор, которая передает объекты промежуточному программному обеспечению редукции-саги. Полученные объекты обычно представляют собой инструкции, которые могут быть выполнены промежуточным программным обеспечением. Когда промежуточное программное обеспечение получает переданное обещание, промежуточное программное обеспечение приостанавливает сагу до тех пор, пока обещание не будет выполнено. завершает. Если вы знаете функцию генератора, вы знаете, что эта функция может выполняться в секциях, но она должна управляться методом next() итератора. Saga эквивалентна реализации такой функции. Когда выполняется первый yield, он ждет обратной части yield.После того, как Promise (обычно асинхронный запрос, такой как http-запрос) разрешается, возвращаемые данные получаются, а затем возобновляется выполнение саги, то есть код, стоящий за yield выполняется, обычно запрашивая у редюсера обновление состояния.

Давайте посмотрим на диаграмму после добавления Redux-Saga:

Мы возражаем к SAGA, дайте имя, называемое эффектом, дайте комнату в поле «Эффекты эффектов», введены в действие, чтобы войти внутрь.

4. Redux-Router

Я не видел много этого.Я понимаю только одно предложение.Когда приложение входит на определенную страницу, срабатывает определенное поведение. Подписка в Два является эталонным Redux-Router.

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

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

5. Dva

Теперь, когда с Redux, Redux-saga и Redux-Router более или менее разобрались, мы наконец-то можем поговорить о Dva.

Что такое Два, можно понимать как Redux + Redux-Saga + Redux-Router. Бог сказал, мне нужна система управления состоянием, поэтому появился Redux; Бог сказал, мне нужно промежуточное программное обеспечение, которое может выполнять асинхронные операции, поэтому появилась Redux-Saga; Бог сказал, я также хочу обрабатывать данные, вызванные изменениями маршрутизации Stream, поэтому Появился Redux-Router, Бог сказал, что я хочу все это, поэтому появилась Два. (сам смеялся, когда закончил писать)

Напомним, как мы говорили ранее, в большом складском хранилище есть много комнат, где хранится состояние, и каждой комнате соответствует соответствующая страница. В этой комнате есть состояние и редюсер, Redux-Saga добавляет к нему эффект, а Redux-Router добавляет к нему подписку, давайте улучшать комнату. Комната на каждой странице должна иметь свое имя, и они не должны быть одинаковыми или нет, или как их отличить, поэтому мы добавляем к ней атрибут namespace в качестве уникального идентификатора комнаты. Наконец, давайте изменим названия этих комнат.Называть их "комнатами" кажется непрофессионально, поэтому назовем их модельными.

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

Давайте посмотрим, как выглядит классическая модель:

app.model({
  namespace: 'count',
  state: {
    record: 0,
    current: 0,
  },
  reducers: {
    add(state) {
      const newCurrent = state.current + 1;
      return { ...state,
        record: newCurrent > state.record ? newCurrent : state.record,
        current: newCurrent,
      };
    },
    minus(state) {
      return { ...state, current: state.current - 1};
    },
  },
  effects: {
    *add(action, { call, put }) {
      yield call(delay, 1000);
      yield put({ type: 'minus' });
    },
  },
  subscriptions: {
    keyboardWatcher({ dispatch }) {
      key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
    },
    setup({ dispatch, history }) {
      history.listen(({ pathname }) => {
        if (pathname === '/') {
          dispatch({
            type: 'add',
          });
        }
      });
    },
  },
  },
});

Схема на официальном сайте Два говорит об этом:

С предыдущими тремя шагами появление Dva произойдет естественным образом.Как говорится на официальном сайте Dva, Dva основана на лучших практиках React + Redux + Saga и сделала 3 важные вещи, чтобы значительно улучшить опыт кодирования.

Объедините магазин и сагу в одну концепцию модели и запишите ее в файл js.

Добавлены подписки для сбора действий из других источников.

Модель написана очень просто, подобно DSL или RoR, а кодирование выполняется очень быстро.

Теперь я наконец понял больше о значении T_T.

6. Umi + Dva

Что такое уми, в документе, который дал мне старший, написано так:

Umi — это среда приложений React, которая объединяет такие функции, как управление маршрутизацией, систему интерфейсных подключаемых модулей, упаковку ресурсов проекта и компиляцию синтаксиса, помогая разработчикам быстро создавать полный набор проектов React. Используя этот каркас, можно легко создавать проекты React.

Для меня в настоящее время umi — это каркас, который позволяет мне легко использовать React + antd + Dva + некоторые другие js-библиотеки, которые можно установить, и опыт разработки действительно классный.

Два уми используются в более простом, полностью 0 API, теперь топ-модель вместо уми писать, а затем привязать его страницу, чтобы посмотреть, как это сделать.

Процесс установки UMI немного, а на официальном сайте есть очень подробное введение. После подготовки вы создадите два файла в папке Pages, с именем index.jsx, именем model.js, почему Model.ts, потому что UMI указывает файл только в SRC / Models / Папка страниц называется Model .js (или TS, будет использоваться как Model.

Запишите следующий код в index.jsx в:

import React from 'react;

const Index = (props) => {

    return(
    <>
    ...
    </>
    )
}

export default Index;

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

const Model = {
  namespace: 'count',
  state: {
    record: 0,
    current: 0,
  },
  reducers: {
    add(state) {
      const newCurrent = state.current + 1;
      return { ...state,
        record: newCurrent > state.record ? newCurrent : state.record,
        current: newCurrent,
      };
    },
    minus(state) {
      return { ...state, current: state.current - 1};
    },
  },
  effects: {
    *add(action, { call, put }) {
      yield call(delay, 1000);
      yield put({ type: 'minus' });
    },
  },
  subscriptions: {
    keyboardWatcher({ dispatch }) {
      key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
    },
    setup({ dispatch, history }) {
      history.listen(({ pathname }) => {
        if (pathname === '/') {
          dispatch({
            type: 'add',
          });
        }
      });
    },
  },
}

Так же написана такая базовая модель, как ее связать воедино, а потом модифицировать индекс:

import React from 'react;
import { connect } from 'umi';

const Index = (props) => {
    const { Count, dispatch } = props; 

    return(
    <>
    ...
    </>
    )
}

const mapStateToProps = (props) => {
    const { count } = props;
    return {
        Count: count,
    };
};

export default connect(mapStateToProps)(Index);

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

Где его найти в этом магазине, UMI мы представили метод подключения, подключаю назад с двумя скобками и сказал, что он связывает страницы данных вместе. После того, как первая скобка используется для получения данных, мы определяем функцию, эта функция в первые скобки, это хранилище реквизитов, и вы можете рассчитывать извлеченные из магазина внутри. Если вы определяете несколько многодельных, вы найдете все модели пространства имен, можно найти в магазине, представляющих состояние каждой модели, поэтому он должен решить очень важные проблемы, связь между двумя страницами вопрос, если два Страницы связаны с государством, что состояние данных может быть передано их.

Во вторых скобках помещается имя компонента.После того, как имя компонента помещено во вторые скобки, вы можете найти данные, возвращаемые в первых скобках, в prOPs компонента! В некоторых ключевых моментах рендеринга компонента реализована привязка State. Конечно же, в реквизитах можно найти и задание «Отправка раздачи»!

Прочитайте это, наверное, также знаете, как достичь MVVM.

Наконец, давайте повторим диаграмму потока данных dva в umi:

Эпилог

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

Изучив весь путь, я действительно чувствую, что если вы хотите понять, как что-то используется, вы должны понять причину его появления.Как и Promise в ES6, разве это не просто решить ад обратных вызовов, чтобы вы знали, что это это цепной вызов. Тогда просто посмотрите на отличный код.Когда я писал его сам, это был действительно кусок дерьма, и я ничего не знал.Позже я прочитал код других аспирантов и официальный код шаблона antd, и я могу только сказать, что я получил много пользы.

Продолжайте учиться и продолжайте совершенствоваться.