React 海淘商城

这次花了大半个月的空闲时间，终于完成个人项目—weinihaigou-react。仅以此文，来记录一下我写这个项目的感想以及总结。

1.技术杂

我用的技术杂是react^16.0.0 + react-router^ 4.2.0 + redux^ 3.7.2 。开发脚手架是create-react-app。

2.项目介绍

这是一个SPA的海购商城，此项目大大小小共 16 个主体页面，涉及注册、登录、商品详情、购物车、下单、订单、订单详情等等，是一个完整的流程。一般公司即便是官网的单页面项目都没这么复杂，如果这个项目能驾驭的了，相信大部分公司的其他单页面应用也就不在话下，即便更复杂，也不会比这个高到哪里去。（做了控制，不能在该项目付款）

3.资源划分

因为之前都是做多页面的，所以转做单页面，遇到的第一个问题就是如何划分资源。比如之前我是在一个项目里面有js文件夹，css文件夹，html文件夹，每个主文件夹下面还会有子文件夹。做SPA，我感觉也是按照页面来分，不过要细入拆分成组件，比如首页下面有一个固定的页脚，分类页面下面也有一个相同固定的页脚，那么就可以提出来作为一个comFooter组件（我写组件的原则就是现在或者将来有可能用到2次或者以上）。那么就会有一个components文件夹，用来专门放置组件的。其次每个页面还是要放在一个pages文件夹下面（也是以组件形式的）。然后做SPA离不开的就是路由以及状态管理器（这个简单的可以不用的），那么又多出来了一个router文件夹以及vuex文件夹。根据上面的分析，我在src文件夹下面的资源配置如下图所示：

4.个人体会

这一段注定很杂乱但是却是本次开发的精华所在。

很多新手和本胖一样不知道如何做第一步，感觉有很多东西都要做，那么就慢慢来。比如本胖这次就是先写好store的骨架以及router的骨架以及main.js和App.vue，这样你的项目以及可以跑起来了。然后根据页面一个一个来，每次写一个页面组件都往router添加一个路由以及看这个页面组件是否有可以提取的组件，有的话就往components文件夹里面添加一个对应的组件，然后在相应的页面组件引用就可以了。慢慢地你的router以及store就会丰满起来。

这次的react项目完全是为了学习react而写的。由于之前本写过一个vue海淘商城，所以下面对react以及vue做一个项目比较吧。

路由配置：

react里面要用Router以及Route来指定相应的路由，vu里面只是一个json格式。还要注意在vue里面只用resolve=>require(['../pages/goods/goodsResult.vue'], resolve)就能懒加载组件，在react-router4以上版本，本胖自己写了一个懒加载组件asyncComponent，所有要懒加载的组件都要通过这个懒加载组件去调用。下面是react以及vue的路由配置图。

store管理：

2者差不多，都是有action，reducer/mutations，store。不过，react你想在组件里面引用store里面的值要每个组件都手动导入store，没有想vue那样全局注册机制（这一点，好的地方在于react的纯粹性，毕竟项目不是你一个做，vue的话很多东西都可以在全局引入，方便了你自己，但是对于整个项目是有污染的)

其他的就是感觉从vue迁移到react，你需要写很多this.state,this.setState()，其中this.setState()这个方法，首先他是异步的，还有一个回调函数，其次，如果你需要改state里面的一个对象的属性或者属性的属性，那么需要定义一个中间对象，先给这个中间对象赋值成你要改成的对象，然后去改成这个中间对象后再将改变后的中间对象setState才行。

react 海淘商城