请问在什么场合适合使用react？ 电商网站适合使用react吗？
我们正在开发电商网站，不知道使用什么框架合适，请问使用react可以吗？求推荐好用的框架？请问怎么选择适合的框架？谢谢！
写下你的评论...
Copyright (C)
All Rights Reserved | 京ICP备 号-2关于Vue电商平台项目的总结 - ty987654的博客 - CSDN博客
关于Vue电商平台项目的总结
首先附上该项目地址：
该项目主要是仿照电商平台，使用vue-router处理路由，主要实现数据的展示，其中在项目中，自己封装了如下拉框，单选框等可复用组件。
App.vue: 实现首页的header和footer,content部分采用vue-router方式进行切换。为首页的logo标志添加路由，在任一路由中点击logo都可跳转到首页.同时首页中存在登录，注册，关于，这三个功能的实现采用类似modal模态框的功能来实现。
1. 给logo图片添加路由,点击跳转到首页
:to="{path: '/'}"&
class="header-img" src="./assets/logo.png" /&
2.关于登录，注册，关于的dialog组件的实现。
这里以登录dialog的实现为例：
:isShow="isShowLogDialog" @close="closeDialog('isShowLogDialog')"&
slot="header-info"&请登录&
slot="content-info" @has-login="logSuccess"&&
dialog.vue:
可复用的dialog弹出框组件，首先会存在一个遮罩层来模拟modal效果，同时弹出框出现和消失时会有动画效果。该弹出框 通过props获得父组件的数据，来控制弹出框的显示和消失。当想要关闭弹出框时，通过this.$emit()来触发父组件事件，在父组件中进行弹出框的关闭。 (因为一般不推荐在子组件中改变通过props获取到的父组件数据。)
class="dialog"&
class="dialog-wrap"&
class="dialog-cover" v-show="isShow" @click="closeMyself"&&
name="dropDialog"&
class="dialog-container" v-show="isShow"&
class="dialog-header"&
name="header-info"&&
class="dialog-close" @click="closeMyself"&x&
class="dialog-content"&
name="content-info"&&
export default {
isShow: false
methods: {
closeMyself () {
this.$emit('close')
登录组件的实现：
class="logForm"&
class="login"&
class="login-info"&
class="input" type="text" placeholder="请输入你的用户名" v-model="userName"/&
class="errorInfo"&{{userNameError.errorInfo}}&
class="login-info"&
&密&nbsp&nbsp&nbsp码&
class="input" type="password" placeholder="请输入你的密码" v-model="passWord" /&
class="errorInfo"&{{passWordError.errorInfo}}&
class="login-info"&
@click="login"&登录&
class="errorText"&{{errorText}}&
export default {
userName: '',
passWord: '',
errorText: ''
computed: {
userNameError () {
let reg = /^[a-zA-Z0-9]{4,12}$/
let errorInfo, status
if (!reg.test(this.userName)) {
status = false
errorInfo = '用户名长度为4--16位，且只能是数字或字母'
status = true
errorInfo = ''
if (!this.userNameFlag) {
errorInfo = ''
this.userNameFlag = true
passWordError () {
let reg = /^\w{6,12}$/
let errorInfo, status
if (!reg.test(this.passWord)) {
status = false
errorInfo = '密码长度为6--12位'
status = true
errorInfo = ''
if (!this.passWordFlag) {
errorInfo = ''
this.passWordFlag = true
methods: {
login () {
if (!this.userNameError.status || !this.passWordError.status) {
this.errorText = '请重新检查你的输入'
this.errorText = ''
this.$emit('has-login', this.userName)
Index.vue：App.vue中的content内容，左侧的产品内容及最新消息内容都是以数据的形式渲染出来；右侧中的轮播调用slideShow轮播组件，四个产品以数据的形式进行渲染。每个产品中，点击立即购买按钮会跳转到相应的路由。
slideShow.vue:
可复用的轮播幻灯片组件。由图片和图片说明信息两部分组成。轮播图片数据通过props从父组件中获取，获取到的是一个存放图片信息的数组，为标签绑定图片信息，将所有图片渲染出来。
detail.vue:
算是四个产品详情页信息的控制者吧。采用vue-router路由切换方式展示四个产品的详细信息。为左侧的图片绑定路由映射，根据不同的的路由显示所对应的不同图片。
这个问题的主要是：当点击不同的产品时，会跳转到相应的产品详情页。
我主要是为每一个点击按钮绑定了路由，即：
:to="{path: 'detail/' + item.toKey}"&
&点击购买&
其中，toKey的值是指在路由配置中path的值。
这一点的实现现在想来还是比较简单的。
还有一点就是：当我点击不同的产品时，出现的图片是不一样的，所以我为每张图片绑定了路由映射。
&!-- 为图片绑定路由映射 --&
&img :src="productImg" /&
'/detail/pro1': require('../../assets/board-item-images/1.jpg'),
'/detail/pro2': require('../../assets/board-item-images/2.jpg'),
'/detail/pro3': require('../../assets/board-item-images/3.jpg'),
'/detail/pro4': require('../../assets/board-item-images/4.jpg')
computed: {
productImg () {
return this.imgMap[this.$route.path]
根据路由的变化显示不同的图片。
可复用单选框组件：
:selections="colorTypes"
@selectChange="onParamChange('proType', $event)"&
class="radioChoose-wrap"&
v-for="(item, index) in selections" :class="{active:index===nowIndex}" @click="chooseSelection(index)"&
{{item.name}}
export default {
selections: Array
nowIndex: 0
methods: {
chooseSelection (index) {
this.nowIndex = index
this.$emit('selectChange', this.selections[index])
单选框组件的实现：主要是从父组件中获得数据，为每一个单选框绑定点击事件，当点击该单选框时，设置当前点击的index等于nowIndex。其中还要注意一点：为每一个单选框绑定 :class=”{active:index===nowIndex}”，只有当index等于nowIndex时，才会显示选中的样式。
可复用下拉框组件
:selections='districts' @selectChange="onParamChange('proPlaces', $event)"&
class="selection-wrap"&
class="selection-title" @click="toggleDrop"&
& {{ selections[nowIndex].name }} &
class="arrow"&&
class="selection-list" v-show="isDrop"&
v-for="(item,index) in selections" @click="chooseSelection(index)"&{{item.name}}&
export default {
selections: Array
nowIndex: 0,
isDrop: false
methods: {
toggleDrop () {
this.isDrop = !this.isDrop
chooseSelection (index) {
this.nowIndex = index
this.isDrop = !this.isDrop
this.$emit('selectChange', this.selections[this.nowIndex])
下拉框组件的实现：从父组件中获得数据，默认显示数组中的第一个，为显示框设置点击事件，为下拉列表绑定v-show属性，通过点击事件，来改变v-show属性的值，实现下拉列表的显示与隐藏。
还有一点就是实现点击下拉列表中的某一项：文本框中会自动显示点击的内容，这主要是为每一项绑定一个点击函数，函数中传入当前点击的index值，并且设置index等于nowIndex，来实现点击时的切换。
使用localStorage来存储用户的购买信息。
首先用户获得自己的购买信息，是通过每次选择完商品属性时，通过$emit()向父组件传递当前所选中的信息，然后将这些信息保存在localStorage中。
因为这些信息信息是以json数据的格式进行存储的，而localStorage中只能保存字符串，所以我通过JSON.stringify()将json对象转化为字符串存储在本地存储中，当用户想要查看购买信息是，在从本地存储中获取。
我的热门文章在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
像京东这页面多的移动网站适合使用vue做成单页面应用吗？
这个问题已被关闭，原因：问题质量差 - 问题太水、伸手党
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以看看这一篇：（京东2016版首页改版前端总结）
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我的看法是，不是越新的技术就代表他越好，我们做项目技术选型时还是主要考虑适用性，像电商类的，这样类似的展示性多一点的网页，个人感觉jquery就挺好的。像angularjs和vuejs啊，更适合数据变化频繁一点的，像后台管理系统这样的。当然，本人也是菜鸟，只是个人看法，希望有用！
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：3被浏览132分享邀请回答0添加评论分享收藏感谢收起