Mobx+typescript写的一个音乐客户端

#1

基于 create-react-app 构建

关于项目

技术栈

  • react
  • mobx
  • typescript
  • scss
  • react-router v4
  • react-motion

心得

mobx和redux给我最直接的感受就是,redux对于小型项目太过繁杂,引入的概念比较多,immutable,action,reducer等等,但是一个小的项目真的需要这些概念吗?我觉得不需要.
之前入门的时候,就使用redux,碰到的这些可以说各个都是拦路虎,很多次让我都感到泄气,我只是写个小应用真的需要这么复杂?不过当时也没有好的实践,社区的大部分基于的都是flux的,导致我以为 react 只能这么用.

mobx提供的基于响应式状态管理,通过mobx-react可以达到响应更新react的视图,不过mobx并不依赖或者说专供react使用,
社区甚至有 mobx-angular.
一个项目写下来,我觉得mobx真的很好用,api友好,oo向,概念少,不过它更新视图并不依赖于react的生命周期方法,它有自己的一套响应系统,对于深层嵌套的数据结构,不必深层比较数据的异同,直接最小更新view.如果你感兴趣这是 mobx中文文档.

这些只是我的一面之谈,谈不上多有用,这里是今年reactconf上关于redux和mobx的比较的翻译.

不过如果你是 新手 的话,mobx和redux 都不是你现在需要的.
只使用react本身提供的 state 系统可以帮助你更好的理解和学习react
你也许不需要redux,同样适用于mobx.

项目地址

https://github.com/dive2Pro/SoundCloundMobx

效果图:

2 Likes
#2

immutable和redux没什么关系。
你这个项目用的音乐是扒的什么网站的？

#3

mobx和observable 的区别是什么？

#4

immutable 这里说的是不可变数据, 对于理解redux还是很重要的 ( [Reducer 基础概念] (http://cn.redux.js.org/docs/recipes/reducers/PrerequisiteConcepts.html) ).

数据扒的是 soundcloud ,文档里面有写,这个网站注册个帐号就可以使用一些基本功能, 不过需要翻墙拿数据 .

mobx 中数据的追踪的底层实现 用的就是 observable 模式, 因此之前它最早的名字就叫 mobxObserver .

#5

redux还没精通，mobx又搞了新模式，我转vue去了。

#6

哈哈, mobx 的作者 有在twitter 上说 mobx 约等于 react - vue ;
使用方式不同,喜欢 模板的话 用vue, 喜欢 jsx 这一套的话 就 react + mobx

#7

哥们跑不起来，有 bug