React结合TypeScript和Mobx步骤详解
为什么要使用TypeScript
侦测错误
通过静态类型检测可以尽早检测出程序中隐藏的的逻辑错误,对于JavaScript动态的弱类型语言,虽然灵活性高,但是对于初学者来说,如果不熟悉JavaScript内部的语言机制,很容易造成隐藏的事故。但是通过TypeScript的静态类型检测可以规避这些问题,因为其能够约束变量产生的类型。结合IDE编辑器可以推导变量对应的类型以及内部的结构,提高代码的健壮性和可维护性。
抽象
类型系统能够强化规范编程,TypeScript提供定义接口。在开发大型复杂的应用软件时十分重要,一个系统模块可以抽象的看做一个TypeScript定义的接口。让设计脱离实现,最终体现出一种 IDL(接口定义语言,Interface Define Language),让程序设计回归本质。
文档
TypeScript可以自动根据类型标注生成文档,对于简单的功能实现都不需要编写注释。
为什么要使用Mobx
MobX 和 Redux 的比较
先要明白 mobx 和 redux 的定位是不同的。redux 管理的是 (STORE -> VIEW -> ACTION) 的整个闭环,而 mobx 只关心 STORE -> VIEW 的部分。
Redux优缺点:
数据流流动很自然,因为任何 dispatch 都会触发广播,依据对象引用是否变化来控制更新粒度。
通过充分利用时间回溯的特征,可以增强业务的可预测性与错误定位能力。
时间回溯代价高,因为每次都要更新引用,除非增加代码复杂度,或使用 immutable。
时间回溯的另一个代价是 action 与 reducer 完全脱节,原因是可回溯必然不能保证引用关系。
引入中间件,解决异步带来的副作用,业务逻辑或多或少参杂着 magic。
灵活利用中间件,可以通过约定完成许多复杂的工作。
对 typescript 支持困难。
Mobx优缺点:
数据流流动不自然,只有用到的数据才会引发绑定,局部精确更新,但避免了粒度控制烦恼。
没有时间回溯能力,因为数据只有一份引用。自始至终一份引用,不需要 immutable,也没有复制对象的额外开销。
数据流动由函数调用一气呵成,便于调试。
业务开发不是脑力活,而是体力活,少一些 magic,多一些效率。
由于没有 magic,所以没有中间件机制,没法通过 magic 加快工作效率(这里 magic 是指 action 分发到 reducer 的过程)。
完美支持 typescript。
SO: 前端数据流不太复杂的情况,使用 Mobx,因为更加清晰,也便于维护;如果前端数据流极度复杂,建议谨慎使用 Redux,通过中间件减缓巨大业务复杂度
使用Create-React-App来建立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: 最后一个命令使用eject将所有内建的配置暴露出来
通过create-react-app可以很方便地对整个项目完成环境初始化,如果愿意折腾TypeScript和webpack的环境可以试试,这里忽略webpack和TypeScript的环境搭建过程,而是使用create-react-app来实现环境搭建。
加入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 history={history}> <Switch> <Route path="/signIn" component={SignIn} /> <Route path="/signUp" component={SignUp} /> <Route path="/" component={Container} /> </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 {...this.props} /> <Switch> <Route path="/website" component={Website}/> <Route path="/" component={App}/> </Switch> </p> ) } } export default 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 {...rootStore}> <Root> <Router history={history}> <Switch> <Route path="/signIn" component={SignIn} /> <Route path="/signUp" component={SignUp} /> <Route path="/" component={Container} /> </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 {...this.props} /> <Switch> <Route path="/website" component={Website}/> <Route path="/" component={App}/> </Switch> </p> ) } } export default 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
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
以上就是React结合TypeScript和Mobx步骤详解的详细内容,更多请关注其它相关文章!
上一篇: 学PS需要什么工具?
下一篇: javascript怎么写