Detaillierte Erläuterung der Schritte zur Kombination von React mit TypeScript und Mobx

Dieses Mal werde ich Ihnen die Schritte zur Kombination von React mit TypeScript und Mobx ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Kombination von React mit TypeScript und Mobx? .

Warum TypeScript verwenden

Fehler erkennen

Durch die statische Typerkennung können versteckte logische Fehler im Programm so früh wie möglich erkannt werden . Da JavaScript eine dynamische, schwach typisierte Sprache ist, kann es für Anfänger leicht zu versteckten Unfällen kommen, wenn sie mit dem internen Sprachmechanismus von JavaScript nicht vertraut sind. Diese Probleme können jedoch durch die statische Typerkennung von TypeScript vermieden werden, da sie die Typen der generierten Variablen einschränken kann. In Kombination mit dem IDEEditor können Sie den der Variablen entsprechenden Typ und die interne Struktur ableiten und so die Robustheit und Wartbarkeit des Codes verbessern.

Abstraktion

Das Typsystem kann die standardisierte Programmierung stärken und TypeScript bietet Definitionsschnittstellen. Dies ist sehr wichtig bei der Entwicklung großer und komplexer Anwendungssoftware. Ein Systemmodul kann abstrakt als eine von TypeScript definierte Schnittstelle betrachtet werden. Lassen Sie das Design von der Implementierung trennen und reflektieren Sie schließlich eine IDL (Interface Define Language), damit die Programmierung zu ihrem Wesen zurückkehren kann.

Dokumentation

TypeScript kann automatisch Dokumente basierend auf Typanmerkungen generieren, und für einfache Funktionsimplementierungen müssen keine Kommentare geschrieben werden.

Warum Mobx verwenden

Vergleich von MobX und Redux

Zunächst müssen Sie verstehen, dass die Positionierung von Mobx und Redux unterschiedlich ist. Redux verwaltet die gesamte geschlossene Schleife von (STORE -> VIEW -> ACTION), während sich mobx nur um den STORE -> VIEW-Teil kümmert.

Vor- und Nachteile von Redux:

• Der Datenfluss fließt natürlich, da jeder Versand eine Übertragung auslöst und die Update-Granularität basierend darauf gesteuert wird, ob sich die Objektreferenz ändert .

• Durch die vollständige Nutzung der Funktion der Zeitrückverfolgung können die Geschäftsvorhersehbarkeit und die Möglichkeiten zur Fehlerlokalisierung verbessert werden.

• Zeitrückverfolgung ist teuer, da die Referenz jedes Mal aktualisiert werden muss, es sei denn, die Codekomplexität erhöht sich oder es wird unveränderlich verwendet.

• Ein weiterer Kostenfaktor für die Zeitrückverfolgung besteht darin, dass die Aktion vollständig vom Reduzierer getrennt ist. Der Grund dafür ist, dass die Rückverfolgung nicht unbedingt eine Referenzbeziehung garantieren kann.

• Führt Middleware ein, um die durch Asynchronität verursachten Nebenwirkungen zu lösen, und Geschäftslogik wird mehr oder weniger mit Magie vermischt.

• Durch den flexiblen Einsatz von Middleware können viele komplexe Aufgaben durch Vereinbarungen erledigt werden.

• Schwierigkeiten bei der Unterstützung von Typoskripten.

Vor- und Nachteile von Mobx:

• Der Datenfluss ist unnatürlich, nur die verwendeten Daten lösen verbindliche und lokal genaue Aktualisierungen aus, aber vermeiden Sie das Probleme der granularen Kontrolle.

• Es gibt keine Timeback-Funktion, da es nur einen Verweis auf die Daten gibt. Eine durchgehende Referenz, keine unveränderliche Referenz erforderlich und kein zusätzlicher Aufwand für das Kopieren von Objekten.

• Der Datenfluss wird durch Funktionsaufrufe auf einmal vervollständigt, was das Debuggen vereinfacht.

• Geschäftsentwicklung ist keine mentale Arbeit, sondern eine körperliche Arbeit, weniger Magie und mehr Effizienz.

• Da es keine Magie gibt, gibt es keinen Middleware-Mechanismus und es gibt keine Möglichkeit, die Arbeitseffizienz durch Magie zu beschleunigen (Magie bezieht sich hier auf den Prozess der Verteilung von Aktionen an Reduzierer).

• Unterstützt Typoskript perfekt.

SO: Wenn der Front-End-Datenfluss nicht zu komplex ist, verwenden Sie Mobx, da es klarer und einfacher zu warten ist. Wenn der Front-End-Datenfluss äußerst komplex ist, ist dies der Fall Es wird empfohlen, Redux mit Vorsicht zu verwenden und es durch Middleware zu verlangsamen. Riesige Geschäftskomplexität.

Verwenden Sie Create-React-App, um eine TypeScript-Umgebung zu erstellen -in-Konfigurationen

Durch die bestandene Create-React-App kann die Umgebungsinitialisierung des gesamten Projekts problemlos abgeschlossen werden. Wenn Sie bereit sind, die Umgebung von TypeScript und Webpack zu verwerfen, können Sie den Umgebungserstellungsprozess von Webpack ausprobieren und TypeScript wird hier ignoriert und create-react-app wird verwendet, um den Umgebungsaufbau zu implementieren.

加入React-Router

单页应用怎么可以没有前端路由呢，所以我们要加入React-Rotuer, 这里使用的React-Router的版本是v4.2.0

路由配置使用姿势

对于React-Router，这里使用到的模块有Router, Route, Switch

React Router 是建立在 history 之上的。 简而言之，一个 history 知道如何去监听浏览器地址栏的变化， 并解析这个 URL 转化为 location 对象， 然后 router 使用它匹配到路由，最后正确地渲染对应的组件。

代码如下：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Router, Route, Switch } from 'react-router';
import { createBrowserHistory } from 'history';
import registerServiceWorker from './registerServiceWorker';
import { Root } from './containers/Root';
import './index.css';
import Container from './containers/Container';
import SignIn from './containers/Auth/signIn';
import SignUp from './containers/Auth/signUp';
const history = createBrowserHistory();
ReactDOM.render(
  <root>
    <router>
      <switch>
        <route></route>
        <route></route>
        <route></route>
      </switch>
    </router>
  </root>,
  document.getElementById('root') as HTMLElement
);
registerServiceWorker();

页面的编写

这里描述一写Container这个组件的编写

import * as React from 'react';
import Header from '../../layout/Header';
import { IAuth } from '../../interfaces';
import { Route, Switch } from 'react-router';
import App from '../App';
import Website from '../Website';
// 这部分是坑点，一开始不知道配置，后发现react-rotuer的4.0版本下需要配置prop的接口
interface Container extends RouteComponentProps {
}
class Container extends React.Component<container> {
  render () {
    return (
      <p>
        <header></header>
        <switch>
          <route></route>
          <route></route>
        </switch>
      </p>
    )
  }
}
export default Container;</container>

这样，当我们访问url为'/'的时候，默认会进入Container，其中Container里面是一层子页面，会匹配url，如果url为'/website', 则进入Website页面，若为'/',则进入App页面。

具体关于React-Router的使用请阅读React-Router文档

加入Mobx

npm i mobx react-mobx mobx-react-router -S

重新修改index.tsx的入口配置

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Router, Route, Switch } from 'react-router';
import { createBrowserHistory } from 'history';
import { useStrict } from 'mobx';
import { Provider } from 'mobx-react';
import { RouterStore, syncHistoryWithStore } from 'mobx-react-router';
// 定义需要使用到的store来进行数据状态的管理
import { 
  TokenStore, 
  AuthStore, 
  HostStore, 
  OverViewStore,
  AssetsStore,
  CommonDataStore,
  PageStore,
  RealTimeStore  
} from './stores';
import registerServiceWorker from './registerServiceWorker';
import { Root } from './containers/Root';
import './index.css';
import Container from './containers/Container';
import SignIn from './containers/Auth/signIn';
import SignUp from './containers/Auth/signUp';
// 引入Echarts
import './macarons';
import 'echarts/map/js/world';
// 开启mobx的严格模式，规范数据修改操作只能在action中进行
useStrict(true);
const browserHistory = createBrowserHistory();
const routerStore =  new RouterStore();
// 同步路由与mobx的数据状态
const history = syncHistoryWithStore(browserHistory, routerStore);
const rootStore = {
  token: new TokenStore(),
  auth: new AuthStore(),
  host: new HostStore(),
  overview: new OverViewStore(),
  assets: new AssetsStore(),
  commmon: new CommonDataStore(),
  page: new PageStore(),
  realtime: new RealTimeStore(),
  router: routerStore
};
ReactDOM.render(
  <provider>
    <root>
      <router>
        <switch>
          <route></route>
          <route></route>
          <route></route>
        </switch>
      </router>
    </root>
  </provider>,
  document.getElementById('root') as HTMLElement
);
registerServiceWorker();

Container容器的修改

import * as React from 'react';
import Header from '../../layout/Header';
import { IAuth } from '../../interfaces';
import { Route, Switch } from 'react-router';
// 使用inject和observer来进行数据监听和数据依赖声明
import { inject, observer } from 'mobx-react';
import App from '../App';
import Website from '../Website';
interface Container extends IAuth {
}
@inject('router', 'auth')
@observer
class Container extends React.Component<container> {
  render () {
    return (
      <p>
        <header></header>
        <switch>
          <route></route>
          <route></route>
        </switch>
      </p>
    )
  }
}
export default Container;</container>

@observable 可以在实例字段和属性 getter 上使用。 对于对象的哪部分需要成为可观察的，@observable 提供了细粒度的控制。

@inject 相当于Provider 的高阶组件。可以用来从 React 的context中挑选 store 作为 prop 传递给目标组件

组件的接口定义

import { RouteComponentProps } from 'react-router';
import {
  RouterStore,
  AuthStore
} from '../stores';
export interface IBase extends RouteComponentProps {
  router: RouterStore;
}
export interface IAuth extends IBase {
  auth: AuthStore;
}

Store的配置

先看一下RouterStore:

import { History } from 'history';
import { RouterStore as BaseRouterStore, syncHistoryWithStore } from 'mobx-react-router';
// 路由状态同步
class RouterStore extends BaseRouterStore {
  public history;
  constructor(history?: History) {
    super();
    if (history) {
      this.history = syncHistoryWithStore(history, this);
    }
  }
}
export default RouterStore;

然后是AuthStore:

import { ISignIn, ISignUp } from './../interfaces/index';
import { observable, action } from 'mobx';
import api from '../api/auth'; 
import { IUser } from '../models';
// 登录注册状态
class AuthStore {
  @observable token;
  @observable id;
  @observable email;
  constructor () {
    this.id = '';
    this.token = '';
    this.email = '';
  }
  setLocalStorage ({ id, token, email }: IUser) {
    localStorage.setItem('id', id);
    localStorage.setItem('token', token);
    localStorage.setItem('email', email);
  }
  clearStorage () {
    localStorage.clear();
  }
  @action async signIn (data: ISignIn) {
    try {
      const { data: res } = await api.signIn(data);
      this.id = res.data.id;
      this.token = res.data.token;
      this.email = res.data.email;
      this.setLocalStorage({
        id: this.id,
        token: this.token,
        email: this.email
      });
      return res;
    } catch (error) {
      return error;
    }
  }
  
  @action async signUp (data: ISignUp) {
    try {
      const { data: res } = await api.signUp(data);
      this.id = res.data.id;
      this.token = res.data.token;
      this.email = res.data.email;
      this.setLocalStorage({
        id: this.id,
        token: this.token,
        email: this.email
      });
      return res;
    } catch (error) {
      return error;
    }
  }
  @action signOut () {
    this.id = '';
    this.token = '';
    this.email = '';
    this.clearStorage()
  }
}
export default AuthStore;

Auth是用于网站的登录注册事件以及对应的Token的数据状态保存，登录注册事件的接口请求等操作。

具体的有关Mobx的用法请阅读Mobx文档

目录结构

app
├── api             后端提供的接口数据请求
├── components      编写的可复用组件
├── config          侧边栏以及导航栏配置
├── constants       常量编写
├── interfaces      接口编写
├── layout          布局外框
├── stores          mobx的数据状态管理
├── index.css       全局样式
├── index.tsx       页面入口
├── reset.css       浏览器重置样式

本项目使用了Ant-Design来作为依赖的组件库，具体怎么使用以及配置请参考Ant-Design

到这里其实以及完成对React下TypeScript结合React-Router和Mobx的配置。具体的业务模块如何编写有兴趣可以参阅项目tinylog-ui

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Chart.js轻量级图表库使用案例解析

centos搭建ghost博客步骤分享

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Kombination von React mit TypeScript und Mobx. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!