React结合TypeScript和Mobx初体验
为什么要使用TypeScript侦测错误通过静态类型检测可以尽早检测出程序中隐藏的的逻辑错误,对于JavaScript动态的弱类型语言,虽然灵活性高,但是对于初学者来说,如果不熟悉JavaScript内部的语言机制,很容易造成隐藏的事故。但是通过TypeScript的静态类型检测可以规避这些问题,因为其能够约束变量产生的类型。结合IDE编辑器可以推导变量对应的类型以及内部的结构,提高代码的健壮性和可维护性。 抽象类型系统能够强化规范编程,TypeScript提供定义接口。在开发大型复杂的应用软件时十分重要,一个系统模块可以抽象的看做一个TypeScript定义的接口。让设计脱离实现,最终体现出一种 IDL(接口定义语言,Interface Define Language),让程序设计回归本质。 文档TypeScript可以自动根据类型标注生成文档,对于简单的功能实现都不需要编写注释。 为什么要使用MobxMobX 和 Redux 的比较先要明白 mobx 和 redux 的定位是不同的。redux 管理的是 (STORE -> VIEW -> ACTION) 的整个闭环,而 mobx 只关心 STORE -> VIEW 的部分。 Redux优缺点:
Mobx优缺点:
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,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 ( <div> <Header {...this.props} /> <Switch> <Route path="/website" component={Website}/> <Route path="/" component={App}/> </Switch> </div> ) } } export default Container; 这样,当我们访问url为'/'的时候,默认会进入Container,其中Container里面是一层子页面,会匹配url,如果url为'/website',则进入Website页面,若为'/',则进入App页面。 具体关于React-Router的使用请阅读React-Router文档 加入Mobxnpm i mobx react-mobx mobx-react-router -S 重新修改index.tsx的入口配置import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { Router,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 ( <div> <Header {...this.props} /> <Switch> <Route path="/website" component={Website}/> <Route path="/" component={App}/> </Switch> </div> ) } } export default Container; @observable 可以在实例字段和属性 getter 上使用。 对于对象的哪部分需要成为可观察的,@observable 提供了细粒度的控制。 组件的接口定义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,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 个人表达能力有限,无法描述得太清晰,请见谅! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |