Некоторый опыт использования dva

React.js внешний фреймворк

dva — это проект с открытым исходным кодом, время от времени поддерживаемый фронтенд-командой Alipay.Он будет поддерживаться, поддерживаться, поддерживаться! ! Он объединяет redux, react-router, а также может использовать TypeScript и т. д. Согласно github, он основан на лучших практиках реагирования, и его действительно удобно использовать. Я не использовал antd для компонента, а написал его сам.

Построить проект

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

1. Установите два-кли

npm install dva-cli -g

2. Инициализируйте проект dva

dva new newDva
进入项目目录执行npm start 就可以看到你初始化的项目了

3. Каталог файлов

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

Основная логика и компоненты всего приложения находятся в большой папке src.
Макет внутри — это макет API-интерфейса.

4. команда два

1. npm start

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

2. npm build

Упакуйте проект. Добавит хеш-значение к имени файла и сожмет файл

3. dva g route example

Создайте маршрут и автоматически зарегистрируйте маршрут в router.js. На самом деле все компоненты страницы помещаются в каталог маршрута, и то, что он создает, является страницей.
Файла будет два.Лично этой инструкцией пользоваться не рекомендуется.Вручную создать папку как страницу.В эту папку помещаются все компоненты текущей страницы,а в папку компонентов можно поместить общедоступные компоненты.

import React from 'react';
import { connect } from 'dva';
import styles from './IndexPage.css';

function IndexPage() {
  return (
    ....
  );
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);

Это шаблон компонента домашней страницы после инициализации, dva поддерживает компоненты состояния. В основном вы не можете использовать жизненный цикл в компоненте dva.
Состояние параметра контролируется соответствующей моделью. Компонент функционального типа, непосредственно возвращающий html-шаблон, может быть оптимизацией производительности для реагирования. Конечно, вы также можете вкладывать другие пользовательские компоненты в возврат.
return <OtherComponent />
Правила тега верхнего уровня по-прежнему нельзя нарушать
Здесь видно, что css импортируется в виде объекта, фактически dva использует метод css-модели. За подробностями вы можете перейти к css-model. Это написано так:
<OtherComponent className={style.one} />
Если вам нужно несколько className, вам нужно написать так
<OtherComponent className={style.one + " " + style.another} />

4. dva g model example

Эта директива очень полезна, она создаст файл example.js в качестве модели и автоматически зарегистрирует модель в router.js.app.model(require('./models/example'));
Модель здесь должна соответствовать папкам в роуте один в один, что равносильно обычному редуксу. Состояние текущего компонента маршрутизации выглядит так

export default {

  namespace: 'example',

  state: {},

  subscriptions: {
    setup({ dispatch, history }) {  // eslint-disable-line
    },
  },

  effects: {
    *fetch({ payload }, { call, put }) {  // eslint-disable-line
      yield put({ type: 'save' });
    },
  },

  reducers: {
    save(state, action) {
      return { ...state, ...action.payload };
    },
  },

};

namespace — имя этой модели, оно глобальное, может фигурировать только одно, и лучше всего оно соответствует компоненту,

Состояние — это данные в этой модели, а также состояние соответствующего компонента.

диспетчеризация — это функция, которая запускает метод, ее можно использовать в модели.

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

> dispatch({ type: 'fetch'}); //如果是当前model可以直接写方法名
如果是别的model的那你需要前面加上model名字 { type: 'OtherModel/fetch'}

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

  • Второй объект { call, put }, передаваемый в функцию выборки, является определенным API, и вы можете ознакомиться с официальной документацией;
  • В методе вызова можно передать метод и параметр, и он автоматически выполнит этот метод.В общем, мы помещаем сюда сетевой запрос.const data = yield call( apiFunction );Получить запрошенные данные;
  • передачаconst data = yield put( { type : "save" , payload :{data} );Вызвать метод сохранения текущего компонента для сохранения текущего состояния, аналогично методу отправки в подписках;
  • Так что фактически состояние всех моделей является общим, вы можете получить состояние этой модели в других моделях или состояние всех моделей.const data = yield select( { modelName } => modelName.stateValue );
  • Здесь также должны быть переходы между компонентамиimport { routerRedux } from 'dva/router'; yield put( routerRedux.push("/targit"));

Редьюсеры: все функции, которые изменяют состояние, передают два параметра: состояние и данные текущей модели.Здесь состояние изменяется с использованием входящих данных. Обычно он вызывается в эффектах или через обратные вызовы событий в компонентах, привязанных к этому модулю.

dispatch({ type: 'save'})

Использование моделей в компонентах

Передать как параметр функции
Экспорт метода соединения dva для соединения компонентов и моделей;

const IndexPage = ({ dispatch, example })=> {
    return <Index />
}
export default connect(({ example }) => ({
   example
}))(IndexPage);

Затем вы можете получить все состояние и метод отправки модели примера в этом компоненте.
состояние: example.stateName получает значение атрибута состояния этой модели
Чтобы вызвать метод модели в компоненте для выполнения ряда операций, вам нужно использовать диспетчеризацию

Запущено по событию компонента

function(){
    dispatch({
        type : "model/name"
        payload : ""
    })
    }

Запустите метод имени этой модели, чтобы выполнить ряд операций;

Если ваш компонент должен использовать жизненный цикл

那你也可以用class 来声明一个组件
class AppointmentPage extends React.Component {
    handleClick(){
        this.props.dispatch({
            type: 'modelName/name'
        })
    }
    render(){
        return (...)
    }
}
export default connect(({ modelName }) => ({
 modelName
}))(Component);

Метод отправки будет в this.props.

5. Как имитировать внутренний интерфейс для возврата данных

Я принял nodejs в качестве локального сервера
Нужно добавить в файл .roadhogrc

"proxy": {
    "/api": {
      "target": "http://127.0.0.1:3000/api/",
      "changeOrigin": true,
      "pathRewrite": { "^/api" : "" }
    }
  },

Пусть он проксирует ваш фоновый сервис, тогда вам нужно будет только написать "api/..." при запросе адреса. Рекомендуется использовать fetch.

Суммировать

Из-за предыдущего соглашения об открытом исходном коде многие большие ребята могут отказаться реагировать или что-то в этом роде, но я думаю, что если это проект с открытым исходным кодом, в этом совершенно нет необходимости.Самые мощные на предприятии должны сами упаковывать подобные. проекты, работающие в Китае, на самом деле не нуждаются в изменениях, Facebook вообще не может войти, и такому мышлению стоит научиться.
Использование dva поначалу может быть очень неудобным, но после его написания все равно ощущается очень приятно.Структура понятна, метод написания не сложный, обработка событий хорошо инкапсулирована, особенно инкапсуляция в редуксе. очень удобен в использовании.Написание оценок не так уж сложно, и команды командной строки используются хорошо. dva использует более деструктурирующие генераторы синтаксиса стрелок присваивания и т. д. Если вы этого не сделаете, вам нужно взглянуть на es6. Вставьте картинку, чтобы понять


Картину украли. .
Если у вас есть какие-либо предложения или ошибки, пожалуйста, обсудите! ! !

Категории