TS+React+Router+Mobx+Koa打造全栈应用

效果图

Todo.gif

Typescript

在TS下开发首先要做好相应的环境配置,一些需要进行设置的编译选项

# tsconfig.json
{
  "compilerOptions":{
    "noImplicitAny": false, // 默认不带类型的就为 any
    "emitDecoratorMetadata": true, // 允许使用装饰器的相关功能
    "experimentalDecorators": true, // 同上
    "baseUrl": ".", // 设置相对路径的基础路径
    "paths": { // 设着alias别名,类似webpack,相对上面设置的基础路径
      "@/*":["./src/*"]
    }
  }
}

如果你使用VSC开发,你想让vscode识别你引用的相对路径并能正确跳转,需要新建一个jsconfig.json。这设置挺蠢的,就不能先从tsconfig.json读么?

# jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "commonjs",
    "paths": {
      "@/*":["./src/*"]
    }
  }
}

React

  1. 要想正确的使用类型推导以及避免出现不存在的属性,需要首先定义一个该组件需要接受的参数的接口
interface IProps extends FormComponentProps {
  history: History
  location: Location
  [name: string]: any
}
class Main extends React.Component<IProps>{}

这里的interface有两个作用,一个是让你能够在调用时this.props.history得到正确的推导,一个是声明了这个component需要接收到的父组件传递的参数。其中history和location是来自于react-router的类型。声明[name: string]:any是为了能够传递任意类型参数给子组件。 在非TS环境中,我们需要通过

MyComponent.propTypes = {
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
}

PropTypes声明这个组件需要接受的参数,翻看源码,Proptypes.xxx 是一个正则表达式用来校验这个参数适合是符合要求的。并且这些都是发生在运行时。而javascript是静态检查,会直接在VSC上给你提醒

  1. 使用上下文(Context) 同样为了正确的推导,使用context的时候也需要实现一个context的接口,区别在于这个接口不通过泛型实现,而是在内部声明一个context属性实现接口,注意,这里仅仅是声明变量,并没有赋值。赋值的操作将会由react自动挂载context属性
interface IContext {
  mobxStores: {
    store: Store
  }
}
class Login extends React.Component<IProps> {

  static contextTypes = {
    mobxStores: PropTypes.objectOrObservableObject
  }

  public context: IContext
}

在这里声明了一个来自<Provider/>>组件包裹的store对象,实现接口仅仅只能实现正确推导。要想正确的接受来自父组件的context必须还要声明一个静态对象,参数是需要获取的对象类型。这里只能通过PropTypes声明。

注意,虽然都叫做声明却有着截然不同的区别。interface并不会TS转义后变成JS的,这里只是人为的通过interface进行了限制,这部分的检测是发生在编译前。而通过Proptypes的声明,其实是进行了赋值操作的。实例化了一个这个对象,react再根据这个对象注入相应的context到这个组件内部,这部分是发生在运行时

React-Router

react中的router相对来说,功能比较单一不太完善,很多地方需要自己实现。

实现前端的鉴权、页面管理, 实现一个私有Route

const PrivateRoute = ({
  component: Component,
  ...rest
}: any) => {
  return (
    <Route {...rest} 
    render={props => store.userInfo.logged ?
     (<Component {...props}/>) : 
     <Redirect to={{pathname:"/login", state:{from : props.location}}}/>}/>
  )
}

其原理就是在原来的Route中额外包裹了一层,判断一个当前的状态store.userInfo.logged,这里是存储用户状态的。如果登录了则渲染路由包裹后的组件否则重定向到登陆页面。这里路由跳转的逻辑和组件耦合起来了。相比较vue-router,vue则提供了导航钩子的,能够在每个路由跳转的时候判断有无登录权限。这个功能在老版本的router中是存在的,v4以后就被移除了。

映射路由表

const routes = [
  {
    path: '/',
    component: root
  },
  {
    path: '/a',
    component: B,
    children: [
      {
        path: '/a/b',
        component: ''
      }
    ]
  }
]

在vue中我们可以简单的通过new Router({routes})实现一个完整的路由映射,在组件中只需要声明<Router-View/>就好了,并且能通过router.addRoutes方法动态添加路由。

在react-route的v3版本中则需要自己map映射出来。v4版本没有办法在一个地方映射所有的route,必须到页面内部使用<Route/>组件包裹

编程式导航

我不喜欢在页面中写很多的导航标签,因为觉得这样不够灵活,偏爱编程式导航。在react-router中,路由有hashrouter和historyrouter两种(只讨论web相关,还有额外的native和memory路由)。

interface History {
    length: number;
    action: Action;
    location: Location;
    push(path: Path, state?: LocationState): void;
    push(location: LocationDescriptorObject): void;
    replace(path: Path, state?: LocationState): void;
    replace(location: LocationDescriptorObject): void;
    go(n: number): void;
    goBack(): void;
    goForward(): void;
    block(prompt?: boolean | string | TransitionPromptHook): UnregisterCallback;
    listen(listener: LocationListener): UnregisterCallback;
    createHref(location: LocationDescriptorObject): Href;
}

这个是路由定义的history对象的接口,其中用的比较多的是push() replace() go() goBack()方法,通过他们进行编程式导航。这里重载了push和replace方法,它们可以接受一个LocationDescriptorObject

interface LocationDescriptorObject {
    pathname?: Pathname;
    search?: Search;
    state?: LocationState;
    hash?: Hash;
    key?: LocationKey;
}

这个对象描述了包含了要匹配的路径以及state search。state是一个和URL无关的自定义数据,可以用来传递参数,这个state不会显示的出现在URL上,只能通过this.props的方式调用。search是一个URL的查询参数,如同http://mrtreasure.cn/?key1=value1&key2=value2,这里的search对应的就是 ?key1=value1&key2=value2,这里是一串字符串,需要进行手动处理

Mobx

之所以没选择Redux是因为之前有学习过redux,能够了解flux架构的理念,但是redux写起来是在太繁琐,aciton reduceer 不可变对象傻傻分不清楚。因此这次选择了尝试mobx

定义一个store

import { observable, action } from 'mobx'

export class Store {
  
  @observable
  public userInfo = {
    username: '',
    password: '',
    token: '',
    logged: true
  }

  @computed get userAllname() {
    return this.usernmae + this.password
  }

  @action
  public setToken(token: string) {
    this.userInfo.token = token
    this.userInfo.logged = true
  }
  
  @action
  public removeToekn() {
    this.userInfo.token = ''
    this.userInfo.logged = false
  }
}

export default new Store()

一个store就是一个独立类,其中有数据部分以及操作部分。

@ovservable修饰需要响应的数据变化,一旦这些数据变化就会执行相应的操作, @computed根据@ovservable的数据计算的计算属性

@action修饰改变数据的方法,store内部的数据只能通过action修饰的方法进行修改。@action修饰的方法只能是同步的,不能是异步的。

注入到实例

有两种方法注入到实例

一种是通过mobx-react提供的<Provider store={store}><Component/></Provider>组件包裹,这种方法将会把store注入到<Provider/>中,类似上文提到的方式,子组件再获取。

另一种是直接在对应的页面引入store

import { store, Todo } from '@/store/TodoStore'

<Row gutter={20}>
  <Col span={8}>
    <TodoList list={store.waitTodoList} state={0}/>
  </Col>
  <Col span={8}>
    <TodoList list={store.processTodoList} state={1}/>
  </Col>
  <Col span={8}>
    <TodoList list={store.doneTodoList} state={2}/>
  </Col>
</Row>

然后直接再直接用于渲染或者分发给子组件

数据驱动

@observer
class Main extends React.Component<IProps> {}

在获取的类上加上注解@observer就好了

思考

这个Mobx其实就是对标的vuex,不同的是它更加灵活,能够通过装饰器或者函数驱动(装饰器本质就是一个函数)。而vuex必须先定义好。

  • @observable obj 就相当于 vuex 中 state,需要注意的是@observable不能修饰 primitive value,只能修饰引用类型。
  • @action 相当于vuex中的mutation,同步的修改状态。为什么是同步的可以参考vuex-mutation
  • runInAction 相当于vuex的action,区别在于,在mobx中是,异步中修改数据,通过runInAction()包裹在内部修改state,而vuex中的action是获取到数据以后再内部触发mutation。所以其实我们只要保证再修改state的时候是同步操作就好了,因此在业务代码中,经常这样使用
const result = await getDataSomehow()
action(result)

这样基本就用不到这个方法了。

总得来说,在react中可以把mobx和vuex看成类似的工具,都是进行全局数据管理的,可以跨组件使用。区别在于mobx更加强大,可以更加灵活的定义需要观察的对象。这个不仅仅在react中,在任何一段JS代码里都可以观察进行观察。并且执行的业务逻辑这块是保存在mobx里的,@observer只是一个'mobx-react'下的用于帮助渲染的装饰器。这个装饰器会根据state的改变触发react的diff进行渲染。而vuex本身是不具备这些功能的,只是一个全局状态管理机,不具备自定义触发事件的能力,触发渲染的逻辑还是vue来做的

Server部分

虽然说的是全栈,但其实这部分写的很少。鉴权,校验参数等等功能都懒得写,只是简单实现了一个登陆以及Todo的CRUD功能,需要注意以下几个点

// 因为端口不同所以是跨域的,对于跨域的预检请求通通放过
router.options('*', async(ctx) => {
  ctx.status = 200
})
// 处理跨域 记得一定要await next()
app.use(async(ctx, next) => {
  ctx.response.set({
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, DELETE',
    'Access-Control-Allow-Headers': 'X-PINGOTHER, Content-Type',
    'Access-Control-Max-Age': '86400'
  })
  await next()
})

其他就是对mongodb的一些操作,so easy。

server-log.png

总结

React相比较Vue真的是太灵活了。通过JSX语法,以及超级的传参可以做出很酷炫的事情。但是因为太灵活了,导致可选择的余地太多。相对于新人来说理解起来也就比较复杂。各种开发的风格也可能存在不统一的情况。 而Vue相比起来虽然选择的余地少,全家桶基本统一风格。但是官方文档齐全,新人也不会犯迷糊。提供的API也比较全面,比如computed, filters, watch, directive, mixin 这些是react没有的。当然react估计会有相关的库去实现。但是对于我们这种搬砖工来说,或许没有选择就是最好的选择,都按照官方文档撸就行了。

关于性能上的问题。在使用mobx的时候我不太能确定哪些地方重新进行了渲染,准确的说我不知道应该在哪些地方添加@observer修饰。我不太喜欢这种不能掌握变化的感觉,当然也可能是我对virtualDOM了解不够。react的灵活性也是的项目的设计思路千奇八怪,实在不知道哪一种是比较优秀的解决方案。这一点可能就要好很多,大概套路都一样,无论怎么写都差距不太大。

还有一个方面关于事件监听。我们知道使用事件委托要比在每一个元素上都绑定了事件监听器要好很多,在vue中,我们给v-for渲染出来的组件绑定事件监听器时,文档已经指出帮我们做了关于委托的优化。而相关的文档我没能在react中找到,因此又统一建事件监听器绑定到了他们的父组件上

Github 以上都是我瞎编的

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

React -- 组件间通信

分为三种类型的通信关系: 1、父组件向子组件通信 2、子组件向父组件通信 3、没有嵌套关系的组件之间的通信 父组件向子组件通信 父组件通过子组件的prop...

4447
来自专栏GIS讲堂

lzugis——Arcgis Server for JavaScript API之POI

POI(Point Of Interest),感兴趣点,其实呢,严格意义上说应该不是POI,但是单位就这样叫了,我也就这样叫了,其实现的功能大致是这样的:用过百...

1092
来自专栏Seebug漏洞平台

34c3 部分Web Writeup

34c3应该算是2017年年末的最后一个惊喜了,比赛题目虽然有非预期导致难度降了很多,但是从CTF中能学到什么才是最重要的,其中Web有3个XSS题目,思路非常...

45810
来自专栏小樱的经验随笔

IPython使用学习笔记

学习《利用python进行数据分析》第三章 IPython:一种交互式计算和开发环境的笔记,共享给大家,同时为自己作为备忘用。 ? 安装ipython用pip即...

4065
来自专栏Python爬虫与数据挖掘

如何利用BeautifulSoup选择器抓取京东网商品信息

昨天小编利用Python正则表达式爬取了京东网商品信息,看过代码的小伙伴们基本上都坐不住了,辣么多的规则和辣么长的代码,悲伤辣么大,实在是受不鸟了。不过小伙伴们...

742
来自专栏Micro_awake web

VSCode配置eslint

在Vue.js项目中,使用的是eslint检查。 而在我写完代码后,cnpm run dev运行命令。。。然后悲剧了,一大堆报错!╮(╯▽╰)╭ 安装插件:Ve...

1.8K5
来自专栏程序员宝库

10 种最常见的 Javascript 错误

英文:SKOWRONSKI 译文:elevenbeans elevenbeans.github.io/2018/02/05/top-10-javascript...

3808
来自专栏程序你好

1000个项目中前10名的JavaScript错误介绍

671
来自专栏崔庆才的专栏

正则表达式中零宽断言的用法

了解了正则表达式,想必一般情况下的匹配都不会出现什么问题,但是如果一些特殊情况,可能需要用到一些更高级的正则表达式匹配操作,本节我们来说明一下正则表达式的一个较...

2934
来自专栏开源优测

[接口测试 - 基础篇] 08 封装个基本的excel解析类

概述 本文基于openpyxl封装一个excel解析类,请注意,不采用Python的任何高级特性,就简简单单的一个类,实现excel的一些基本操作,并演示如何...

3769

扫码关注云+社区

领取腾讯云代金券