V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
jackon
V2EX  ›  前端开发

三五人开发,移动端优先,兼容性要求高。使用 vue 还是 react?

  •  
  •   jackon ·
    JackonYang · 2016-09-06 13:56:25 +08:00 · 16657 次点击
    这是一个创建于 3031 天前的主题,其中的信息可能已经有所发展或是发生改变。

    公司要开一个新的项目,移动端优先,需要考虑很多安卓手机的浏览器的兼容问题。

    开发团队,三五人。前后端完全分离,后端只提供 API 。

    听到不少关于 react 性能/兼容性方面的负面评价。 尤其要微信浏览器内使用方便,乐于分享。

    想用 react ,但听到不少负面评价,尤其是 性能/兼容性等方面。

    react 适合我们么?

    vue 很不错,但总担心生态系统不健全,踩到深坑 team 没有独立解决的能力。

    该如何选择呢?感谢各位!

    45 条回复    2016-09-12 08:54:12 +08:00
    dantegg
        1
    dantegg  
       2016-09-06 14:00:50 +08:00
    jquery (逃~
    allce231
        2
    allce231  
       2016-09-06 14:03:14 +08:00
    angular 吧
    egen
        3
    egen  
       2016-09-06 14:10:10 +08:00 via iPhone
    react 微信支付有吭,安卓兼容性不清楚
    Eoss
        4
    Eoss  
       2016-09-06 14:10:15 +08:00 via iPhone
    zeptojs 。(逃
    mcfog
        5
    mcfog  
       2016-09-06 14:11:02 +08:00   ❤️ 3
    先想清楚你们要做的是 web app 还是 web page ,前者才需要考虑这个问题,后者的话,直接原生 H5 ( fetch/promise )配上合适的 polyfill 就好

    现在锤子是发展得比以前好的很多,但也不能看到什么都像是钉子
    jiyinyiyong
        6
    jiyinyiyong  
       2016-09-06 14:11:53 +08:00
    单纯看体积的话 React 不如 Vue. 页面小运行性能差距并不明显.
    jackon
        7
    jackon  
    OP
       2016-09-06 14:19:44 +08:00
    @mcfog 感谢!

    如果 web app 指的是 单页应用( SPA )的话,
    似乎懂一点了,路由一类的兼容问题,对么?

    对于普通的多页应用,渲染出来跟手写的原生 H5 差别不大。
    一直不理解兼容问题来自于哪里。
    des
        8
    des  
       2016-09-06 14:19:51 +08:00 via Android
    同五楼,你要确定是 web app 还是 Web Page ,或者纯粹只是大家熟悉那种“ H5 ”。
    如果纯粹只是“ H5 ”,我推荐百度的那个,效果可以看 h5.baidu.com
    如果是 Web app ,我推荐 vue ,不知道大家怎么看?
    jackon
        9
    jackon  
    OP
       2016-09-06 14:20:36 +08:00
    @jiyinyiyong 暂时不考虑做太大的页面,减少技术难度。
    jackon
        10
    jackon  
    OP
       2016-09-06 14:22:06 +08:00
    @egen 微信支付的坑,是跟路由有关么?还是跨域问题?
    hronro
        11
    hronro  
       2016-09-06 14:23:02 +08:00 via Android
    react 我在微信上用过,没太大的兼容性问题。
    jackon
        12
    jackon  
    OP
       2016-09-06 14:23:49 +08:00
    @des 不是简单的几个 html5 页面。

    用户可以上传视频,做一些心理测试,然后查看测试结果。

    大概是这种产品。
    jackon
        13
    jackon  
    OP
       2016-09-06 14:24:35 +08:00
    @hronro 刚想问你 安卓上有没有测试,看到你的消息理有 via Android 。

    感谢!
    evil4u
        14
    evil4u  
       2016-09-06 14:44:07 +08:00
    用户可以上传视频,做一些心理测试,然后查看测试结果。

    这类需求如果需要数据绑定,用 vue 够够的了,如果交互不多, vue 都不需要。
    用什么,还是看需求。
    jackon
        15
    jackon  
    OP
       2016-09-06 14:47:06 +08:00
    @evil4u 主要还是担心以后功能大幅度增加。

    毕竟,创业公司, CEO 脑洞都很大。
    几个月以后,回头看。
    跟当时做的,好像不是一个产品了耶。
    egen
        16
    egen  
       2016-09-06 14:53:24 +08:00
    @jackon URL 不能带 #,支付需要单独做一个页面
    learnshare
        17
    learnshare  
       2016-09-06 14:56:09 +08:00
    @jackon 路由( URL 的问题, hashtag 的 URL 针对支付和其他接口的表现不一致)

    上传视频貌似不容易,录音和上传图片倒还可以做。

    至于 React/Vue/Angular ,能写哪个就用哪个,有解决坑的能力比较重要。
    microchang
        18
    microchang  
       2016-09-06 14:59:44 +08:00 via Android
    @egen react-router 可以不使用 hash , URL 表现和普通页面一样
    Zzzzzzzzz
        19
    Zzzzzzzzz  
       2016-09-06 15:01:48 +08:00
    react 全家桶用在移动流量下简直是犯罪.
    egen
        20
    egen  
       2016-09-06 15:02:43 +08:00
    @microchang 是的,然而之前已经用 hash 做了 n 个页面了,调整起来很费劲,所以单独做了一个,一劳永逸
    egen
        21
    egen  
       2016-09-06 15:05:22 +08:00
    顺便提一下,我们尝试过 react-router 不用 hash ,这种方式在 ios 微信上有坑,后退的时候历史不大正常
    sudoz
        22
    sudoz  
       2016-09-06 15:07:54 +08:00
    @Zzzzzzzzz 怎么回事?大量请求?
    egen
        23
    egen  
       2016-09-06 15:12:14 +08:00
    @Zzzzzzzzz 流量方面我们做了一个小 app ,代码量 4k 左右,首页加载 300k 左右

    纯静态的好处是只要第一次加载完,后面简直不能太爽

    300k 对现在的移动流量真是小意思
    learnshare
        24
    learnshare  
       2016-09-06 15:22:03 +08:00
    @egen 后退不是问题,刷新才坑吧,服务器会去请求 URL 对应的静态资源,然而根本没有这个资源。

    @Zzzzzzzzz Web App 流量不比看图文资讯大,代码一次请求,后续流量可以优化得跟 App 的流量消耗一样。
    jackon
        25
    jackon  
    OP
       2016-09-06 15:28:01 +08:00
    @learnshare 服务器会去请求 URL 对应的静态资源,然而根本没有这个资源

    这是 server 配置的问题。不是 react 的问题。 SPA 页面的 server ,配置略有差别。
    jackon
        26
    jackon  
    OP
       2016-09-06 15:29:43 +08:00
    看大家的讨论,基本搞明白了。

    很多的坑,不是 react 本身无法解决的问题,只是大多数团队不具备填坑的能力。

    我们就用 react 了。

    感谢各位!
    des
        27
    des  
       2016-09-06 15:39:35 +08:00 via Android
    @jackon 看了一下需求,真心不建议你们用 react , vue 之类的框架。当然决定权在你们。

    就算加功能也完全不用再原来的页面上,新功能可以单独出一个页面(和原功能不相关的话),省心省力
    只有踩了坑才会知道
    des
        28
    des  
       2016-09-06 15:44:00 +08:00 via Android
    @jackon 顺带说一下,你们这个大家口中的“ H5 ”,就目前描述来看。我以前也做过
    learnshare
        29
    learnshare  
       2016-09-06 16:14:50 +08:00
    @jackon 是的,但会带来比较多的麻烦。所以并不推荐改 URL 。
    ChefIsAwesome
        30
    ChefIsAwesome  
       2016-09-06 16:29:27 +08:00
    几个技术概念:

    一. 前端模板:前端 js 取过来的数据,通过模板语言生成 html 。不用自己在那拼字符串了。

    二. mvvm 数据绑定:同一个页面里头的不同 view 显示的是同一 model ,而且这些 view 都能操作这个 model ,如何保证 view 的一致性,如何简化编程难度? mvvm 的框架都会提供绑定的概念。不同的 view 可以都绑定在某个 model 上,当这个 model 更新时,所有绑定的 view 都会更新。作为开发者,你关注的就只是用户操作时如何更新这个 model ,而不是具体如何更新 view 了。

    三. virtual DOM :上面说的 mvvm 架构里头,如果 model 是一个数组, view 是一个列表。数组中的某一项变化时,整个列表都会变化,显然这里头有性能问题。 virtual DOM 通过提供一层 html 的代理,尝试帮你解决这个问题。作为开发者,你做的仍然是绑定 model 到 view 里,当 model 更新时, view 自动更新,只是此时你绑定的是 virtual DOM ,而不是真正的 html 。 virtual DOM 会计算出真正需要更新的 html ,再去更新它们。

    四. 组件化:组件化追求的是自定义标签,往 html 上头加个 class 就能实现某个功能,这种 declarative 的 api 。有很多种方式能实现这样的 api 。

    五. first class 组件: 把组件当作 first class ,能用函数返回,能传给函数当参数,能通过各种方式组合,这是更高一个层面的组件化了。

    前三项是扩展的关系。支持 virtual DOM 肯定支持数据绑定,肯定能把 js 取来的数据渲染成 html 。每扩展一次,肯定会加一层新的抽象,复杂程度很可能会提高。

    后两项之间也是扩展关系。跟前三个一样,扩展意味着多一层抽象。

    楼主还是仔细考虑考虑你们到底要干啥再选择框架吧。别只是渲染个数据,结果却搞成了各种全家桶了。
    hronro
        31
    hronro  
       2016-09-06 16:52:55 +08:00
    @jackon 安卓上没啥问题,至少 react 本身没有兼容性问题。另外支付页面不单独做一个页面也是可以的,只是要在公众号里面分别为安卓和 ios 配置两个支付地址
    hronro
        32
    hronro  
       2016-09-06 17:00:28 +08:00
    总的来说,微信安卓上的坑,基本都是 X5 内核本身的坑,这些坑就算不用 react 用其他的框架也会遇到。至少我在微信上用 react 开发了半年时间,没遇到 react 的安卓兼容性问题
    zhouquanbest
        33
    zhouquanbest  
       2016-09-06 17:08:35 +08:00
    我们人更少 然后老大拍板用 pug 后端渲染。。。。。。。。
    先发发现绝大多数展示用界面挺好用的
    复杂的再用 react
    66beta
        34
    66beta  
       2016-09-06 17:11:01 +08:00
    React 吧,社区比较健壮
    vue 国内用得多,但是社区贡献少
    jackon
        35
    jackon  
    OP
       2016-09-06 17:27:14 +08:00
    @66beta 是的,社区比较重要。


    @zhouquanbest 不想继续搞后端渲染。前端彻底分离开发了。
    jackon
        36
    jackon  
    OP
       2016-09-06 17:27:51 +08:00
    @hronro 的确,微信的问题,只能针对性的去处理了。
    jackon
        37
    jackon  
    OP
       2016-09-06 17:28:44 +08:00
    @ChefIsAwesome 不是个人的玩具项目,也不是短期的小项目。所以,前期的选型、架构,都很重要了。
    coldsnap
        38
    coldsnap  
       2016-09-06 22:23:45 +08:00
    担心 react 体积的话可以用 preact 或者 react-lite 。在移动端 Vue 的生态也很好,组件非常多(大部分是 1.0 的)。
    微信支付的问题只要是 SPA 都会遇到,不管是 vue-router 还是 react-router ,前端不管是用 hash 还是 history popstate 都会有问题。
    smilingsun
        39
    smilingsun  
       2016-09-07 00:20:52 +08:00 via Android
    vuejs ,饿了么开源的 mint-ui ,用了都说好
    zongwan
        40
    zongwan  
       2016-09-07 09:29:35 +08:00
    react 进步很快
    vue 看新闻说要融入到阿里的那个引擎了

    推荐 react

    现在一般这里找轮子。感觉挺方便
    https://js.coach/react
    mdluo
        41
    mdluo  
       2016-09-07 10:11:23 +08:00
    react 和 vue 之间的选择完全看个人喜好,要说 性能 /兼容性问题,其中一个有的问题另一个也会遇到

    不过在国内前端圈,捧 vue 黑 react 是政治正确
    killpigman
        42
    killpigman  
       2016-09-07 10:11:27 +08:00
    react ,千万别用 vue
    capricorn
        43
    capricorn  
       2016-09-07 10:27:57 +08:00
    我们产品是个放在公众号里的 web app ,使用 React 。一些兼容性问题跟 React 本身并没有什么关系,跟微信浏览器有关,遇到的问题都可以 hack 。

    React 的社区及第三方扩展数倍强大于 Vue
    zhouyg
        44
    zhouyg  
       2016-09-07 11:19:30 +08:00
    两者都用过,最大的感触是 react 碰到问题基本都能直接 goolge 到。

    用 vue 的话,很多问题基本查不到,只能自己去摸索源代码然后慢慢解决。用 vue 的话,我觉得确保非常熟悉才好。
    jaywcjlove
        45
    jaywcjlove  
       2016-09-12 08:54:12 +08:00
    感觉用 React 比较好解决问题。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1110 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 19:03 · PVG 03:03 · LAX 11:03 · JFK 14:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.