最近两周顺带着重撸了一套小的后台管理系统(包括前端和后台),简要的记下一点点体会吧(前端方面的)。
因为很早之前就是上手的 react ,所以这次依然是用的 react 撸的,路由部分 react-router 少不了,数据流管理仍然选用 mobx ,webpack 不用说,前后端通信则是 axios,当然还有我挺喜欢的组件库 antd 。
先说 react 吧,组件化的思想我一直都很喜欢,JSX 的风格也是,在写 react 的时候组件的按需加载是一个需要注意的地方,这其实是说我们应该尽量避免使用 display:none 去隐藏某个组件,而是应该通过判断某个条件让这个组件本身就不被 render 出来。大胆的使用 CSS in JS ,也许传统上我们习惯于将 CSS 样式文件全部分隔剥离出来,但是现在既然所有的页面都是由组件来构成,而这些 CSS 样式不就是对应的某个组件吗,这样的话使用 CSS in JS 其实可以更加方便的管理组件,特别是对于小型应用。
react-router 由最开始自己使用时的 2.x 升级到了 4.x,老实说升级之后还是有点小不适用的,原来的路由嵌套写法已经行不通了,API 更新了很多,现在的路由同样仅仅只是个组件而已,从某种意义上来说也许我们无需将它视为高组件一等的东西,而现在的 router 更加灵活多样。
对于 mobx ,老实说曾经看了一个星期的 redux 愣是没搞明白怎么在自己的现有项目中使用,而且它喵的一个简单操作也需要去写大量的代码(当然现在来看函数式编程确实是很优秀的),而 mobx 简单粗暴直接,API 就那么几个,也很有 Rx 的味道,所以就 mobx 了。
webpack 嘛 就不多说了,地球人都知道,用过都说好,而前两天用 webpack-dev-server 的时候因为引入 bundle.js 文件的路径问题踩了个小坑,我相信用过的人都会碰到过:场景就是刷新当前页面直接 404 了,一般加上
historyApiFallback 就行了,但是当使用了嵌套路由的时候,外层路由是好的,嵌套下的路由却会 404 ,原因就是引用路径的问题:
至于 axios,都说 fetch 是下一代的 ajax,但事实上我觉得 axios 更好用,就这样。
顺便补充下 echarts,百度的良心产品,echarts 是在真实的 dom 节点上通过 canvas 绘制图表,牢记这一点我们就可以随心所欲的在 react 中使用:先 render 渲染出一个真实的组件,然后在 componentDidMount 里调用 echarts 的那些 API 绘制即可。
最后 antd,确实是很优秀,包括简洁优雅的风格和细节上的处理,最重要的是 issue 响应速度贼快,当然这里不得不说大半年前在给阿里的这帮人提 issue 的过程让我印象最深的一点就是关于怎样问问题,确实我们经常习惯站在自己的角度并且带有业务性质的去问问题,而不是将问题抽象出来并可重现,这样提出来的问题别人通常很难理解并回答,这种情况恐怕对于 90% 的新手来说都是这样的,这也是我最近刷 segmentfault 很深的一点体会。
就写这么多吧,也没啥干货。