吊带公主裙|为什么我们放弃了Vue?Vue和React深度比较( 四 )

在js逻辑部分其中写法没毛病 , 都需要用到框架特定的生命周期钩子 , Vue的类写法最简洁(3种对比) , 反应的功能写法最清晰(全部写法对比) 。 这部分不是选择关键 , 怎么写是个人喜好 。
组件内状态管理Vue使用的是数据对象(数据) , 反应使用的是状态对象(不可变状态) , 这点两个框架的设计不同 , 如下的问题解决思路也不同 。

  1. 我如何修改数据?Vue直接将此引用数据对象 , 直接修改 。 React使用setState方法修改
  2. 框架如何发现数据被修改?Vue使用es5新方法Object.defineProperty , 劫持setter , getter实现数据监听 。 React , 你用了setState , 它通过这个函数就知道一些数据变化了 。
  3. 我如何发现数据被修改?Vue:使用观察者 , 或者计算属性发现反应:componentWillUpdate , componentDidUpdate中可以监听变化 , 或者函数组件的依赖部分插入
  4. 框架何时渲染修改的数据 , 我如何知道已经渲染好了?Vue:在适当的时候渲染 , 你通过使用watcher , 或者计算属性发现反应:setState调用后在适当的时候重新渲染 , 并调用相关生命周期钩子
在组件状态管理功能上两者都没有太多槽点 , 如果要说的话就是Vue watcher写多了代码一堆缩进 , 比较严重 , 反应也没好多少 。
Vue的写法更加简单 , 但组件状态很多 , 需要明确的数据更新逻辑时 , 反应简单的setState({}, callback) , 就搞定了 , Vue有点让人摸不到头脑 。
Vue项目解决bug和疑难杂症三大定理
没有什么是deep watch解决不了的 , 有就加立即事件相关 , dom相关记得nextTick实在不行 , 就用setTimeout
(来自某师兄)
React的不可变(immutable)状态在应用复杂时表现出的透明 , 可测试性更佳 。
以上内容对比下降 , 感觉两者都OKOK的 , 功能也健全 , Vue生态差一点 , 但是可以自己动手丰衣足食 。 以下是我们真正弃用Vue的原因 。
沃苏艾德布耀布耀德说过:同样的问题 , 在语言层面上的解决方案才是最佳解决方案 。 语言生命周期长于框架生命周期
模板语法VS JSX一部分丢失Vue的单文件组件 , 使用 , 上述代码会报错:
【吊带公主裙|为什么我们放弃了Vue?Vue和React深度比较】[Vue warn]: Property or method "isNickname" is not defined on the instance but referenced during render所以你只能将方法定义在methods中 , 再引用进来 。 模板语法并不知道你有isNickname这个函数 , 简单的操作多了3行代码 。
模板语法不是图灵完备的 , 必须转换为js代码(渲染函数) , 放在组件语境下才行 。 类似的例子还有很多 , 你会发现 , 你写的代码与Vue强绑定了 , 哪天Vue核心库升级了 , 你代码也崩溃了 。 Vue核心库升级了 , 周边依赖库也得跟着升级 。
模板分割好的代码组织能将常变与不变的部分进行分割解变量
Vue的模板严重限制了这一点 。 举个例子 , 前端有个拖放菜单 , 功能不断增加 , 而且对于不同的人要显示不同菜单(权限管理) 。 在Vue中 , 为了实现html代码(绑定在template)中)的分割 , 你只能再搞一个组件 。 在React中 , 可以直接这样写:
const menu = abc;可单独做一个组件(低开销函数组件) , 也可当做变量 , 放在当前代码中 。 相对灵活很多 。
JSX手写渲染渲染函数自带下面的优势
  • 完整的js功能来构建视图页面 , 可以使用临时变量 , js自带的控制流 , 以及直接引用当前js作用域中的值
  • 开发工具对jsx的支持比现有vue模板高级(linting , typescript , 编译器自动补全)
JSX可以用于Vue可以用于React , 就像Redux一样 。 这种语言是与框架解压缩的 。


推荐阅读