Explication détaillée des étapes de combinaison de React avec TypeScript et Mobx

Cette fois, je vais vous apporter une explication détaillée des étapes pour combiner React avec TypeScript et Mobx Quelles sont les précautions pour combiner React avec TypeScript et Mobx Voici des cas pratiques, jetons un coup d'œil. .

Pourquoi utiliser TypeScript

Détecter les erreurs

Grâce à la détection de type statique, les erreurs logiques cachées dans le programme peuvent être détectées le plus tôt possible . Pour JavaScript un langage dynamique faiblement typé, bien qu'il soit très flexible, pour les débutants, s'ils ne sont pas familiers avec le mécanisme interne du langage JavaScript, il est facile de provoquer des accidents cachés. Cependant, ces problèmes peuvent être évités grâce à la détection de type statique de TypeScript, car elle peut limiter les types de variables générées. Combiné avec l'IDEEditeur, vous pouvez en déduire le type correspondant à la variable et la structure interne, améliorant ainsi la robustesse et la maintenabilité du code.

Abstraction

Le système de types peut renforcer la programmation standardisée et TypeScript fournit des interfaces de définition. C'est très important lors du développement d'un logiciel d'application volumineux et complexe. Un module système peut être considéré de manière abstraite comme une interface définie par TypeScript. Que la conception soit séparée de la mise en œuvre, et reflète enfin un IDL (Interface Define Language), permettant à la programmation de revenir à son essence.

Documentation

TypeScript peut générer automatiquement des documents basés sur des annotations de type, et il n'est pas nécessaire d'écrire des commentaires pour des implémentations de fonctions simples.

Pourquoi utiliser Mobx

Comparaison de MobX et Redux

Tout d'abord, vous devez comprendre que le positionnement de mobx et redux est différent. Redux gère toute la boucle fermée de (STORE -> VIEW -> ACTION), tandis que mobx ne se soucie que de la partie STORE ->

Avantages et inconvénients de Redux :

• Le flux de données circule naturellement, car toute expédition déclenchera une diffusion et la granularité de la mise à jour est contrôlée en fonction du changement de référence de l'objet. .

• En utilisant pleinement la fonctionnalité de retour en arrière dans le temps, la prévisibilité commerciale et les capacités de localisation des erreurs peuvent être améliorées.

• Le retour en arrière dans le temps coûte cher car la référence doit être mise à jour à chaque fois, à moins que la complexité du code ne soit augmentée ou qu'un immuable ne soit utilisé.

• Un autre coût du temps de retour en arrière est que l'action est complètement déconnectée du réducteur. La raison en est que le retour en arrière ne peut nécessairement garantir une relation de référence.

• Présente un middleware pour résoudre les effets secondaires causés par l'asynchronie, et la logique métier est plus ou moins mélangée à la magie.

• En utilisant le middleware de manière flexible, de nombreuses tâches complexes peuvent être réalisées via des accords.

• Difficulté à supporter le dactylographie.

Avantages et inconvénients de Mobx :

• Le flux de données n'est pas naturel. Seules les données utilisées déclencheront des mises à jour contraignantes et locales précises, mais évitez-les. problème de contrôle granulaire.

• Il n'y a pas de capacité de retour en arrière car il n'y a qu'une seule référence aux données. Une référence partout, aucun immuable requis et aucune surcharge supplémentaire liée à la copie d'objets.

• Le flux de données est complété par des appels de fonction en une seule fois, ce qui facilite le débogage.

• Le développement commercial n'est pas un travail mental, mais un travail physique, moins de magie et plus d'efficacité.

• Comme il n'y a pas de magie, il n'y a pas de mécanisme middleware et il n'y a aucun moyen d'accélérer l'efficacité du travail grâce à la magie (la magie fait ici référence au processus de distribution des actions aux réducteurs).

• Prend parfaitement en charge la dactylographie.

SO : Si le flux de données front-end n'est pas trop complexe, utilisez Mobx car il est plus clair et plus facile à maintenir si le flux de données front-end est extrêmement complexe, c'est le cas ; Il est recommandé d'utiliser Redux avec prudence et de le ralentir via un middleware. Énorme complexité commerciale

Utilisez Create-React-App pour créer un environnement TypeScript

npm i -g create-react-app
create-react-app tinylog-ui --scripts-version=react-scripts-ts
cd tinylog-ui/
npm start
npm run eject

TPS : la dernière commande utilise eject pour exposer toutes les configurations intégrées

Create-react-app peut facilement terminer l'initialisation de l'environnement de l'ensemble du projet. Si vous êtes prêt à abandonner l'environnement de TypeScript et webpack, vous pouvez l'essayer. webpack et TypeScript sont ignorés ici, mais utilisez create-react-app pour y parvenir.

加入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博客步骤分享

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!