最新 Mobx4 + react16 + react-router4 +ant design3 后台管理脚手架

#1

麻雀虽小，五脏俱全

按需加载，代码分割，抽离css，提取第三方库，hash缓存，autoprefixer，HMR，浏览器差异规范化。

技术栈：

Mobx4 + react16 + react-router4 +ant design3 + less +webpack4 + ES6/7 + fetch

源码地址：

https://github.com/beverle-y/react-starter-kit

内有mobx在大型项目内的使用方法

routers下除Layouts、Login外的其余组件均为展示作用。

觉得不错可以 star下~

欢迎大佬指点，不喜勿喷。

5 Likes
React16 + redux4 + react-router4 +ant design3 后台管理脚手架
使用mobx-react 的inject 装饰器 与 不用的区别？
#2

顶一个，学习了，虽然我那边做了mobx管理系统，但是不会搭架子

#3

我想知道ie8能用吗

#4

ssr?支持了吗

#5

压根就没考虑ie

#6

:+1:厉害厉害，学习了

#7

框架基本和我们一样 唯一不同的是 webpack 我们以前也用webpack，后来经过测试发现fusebox 性能比webpack好，然后就改了

#8

最近Parcel挺火的，fusebox还是第一次听到，简单了解了一下，性能不错。

#9

互相学习吧，有些地方还是值得优化的。

#10

我想问下浏览器的前进和后退如何才能阻止组件自动刷新，查了好多资料都说的不是很明白

#11

组件不是自动刷新，而是重新加载了。
react没有vue：keep-alive这个功能。因为切换路由，当前组件必然会卸载。
So，你只能模仿没有刷新这个行为，也就是记录之前的状态。
一：按照这个框架的逻辑，如果是需要保存状态的组件，就不要在constructor里实例化store，而是直接new出来。
二：本地记录状态，localStorage等，用this.props.history.action的值来加以判断是否为后退回来的。POP为浏览器后退按钮或goBack()。

#12

回复你了，看楼上

#13

多谢，我前面试了一下mobX，完美解决了这个问题，不仅连刷新的问题也解决了，连滚动的问题也解决了，因为mobX貌似直接绕过了React的周期

#14

不会绕过生命周期，observer监测过的组件，其生命周期会增加一个componentWillReact，像componentWillMount、componentWillUnmount等在跳转时皆会触发。

#15

So吊 So吊 So吊

#16

无人问津，自己顶。:yum:

#17

谢谢，简单明了，结构清晰，实用！

#18

手动置顶~~~

#19

赞一个:+1:。。。。

#20

三 redux-persist 这个也可以的其实他也是用的storage来存的