今晚我们来搞一搞 vue 和 React 的对比好吧, 话不多说今天我们直接开搞可好, 各位小老板, 开始吧
1.react 整体是函数式的思想, 把组件设计成纯组件, 状态和逻辑通过参数传入, 所以在 react 中, 是单向数据流, 推崇结合 immutable 来实现数据不可变. react 在 setState 之后会重新走渲染的流程, 如果 shouldComponentUpdate 返回的是 true, 就继续渲染, 如果返回了 false, 就不会重新渲染, PureComponent 就是重写了 shouldComponentUpdate, 然后在里面作了 props 和 state 的浅层对比;
而 vue 的思想是响应式的, 也就是基于是数据可变的, 通过对每一个属性建立 Watcher 来监听, 当属性变化的时候, 响应式的更新对应的虚拟 dom
2.react 的性能优化需要手动去做, 而 vue 的性能优化是自动的, 但是 vue 的响应式机制也有问题, 就是当 state 特别多的时候, Watcher 也会很多, 会导致卡顿, 所以大型应用 (状态特别多的) 一般用 react, 更加可控
详解: vue 组件在初始化时会通过 Object.defineProperty 对每一个 data 属性建立对应的 Wather, 然后在模板编译时收集依赖. 以后只要修改 data 的任何一个属性, 就会触发视图的重新渲染, 而且是精确的修改对应的 vdom
react 的机制是每次 setState 的时候, 调用 shouldComponentUpdate, 判断 state 或 props 改变需不需要重新 render, 如果返回 true 才会渲染. 默认的实现是返回 true,PureComponent 的 shouldComponnentUpdate 浅层对比了两次 state, 考虑到性能, 需要写好 shouldComponentUpdate.
3. react 的思路是 all in JS, 通过 JS 来生成 html, 所以设计了 jsx, 还有通过 JS 来操作 CSS, 社区的 styled-component,jss 等
vue 是把 HTML,CSS,JS 组合到一起, 用各自的处理方式, vue 有单文件组件, 可以把 HTML,CSS,JS 写到一个文件中, HTML 提供了模板引擎来处理
详解: react 渲染是使用 jsx, 用 JS 来操作 HTML, 列表渲染, 条件判断等都通过 JS 来控制, 而 vue 提供了模板的语法, 支持指令, 过滤器等模板功能, 简化了渲染逻辑. 在 react 组件里需要写大段 JS 才能描述清楚的逻辑, 使用 vue 的模板可以很简洁紧凑的表明.
模板和 jsx 各有优缺点, jsx 全部使用 JS 来写逻辑, 更加的灵活, 也没什么学习成本, 但是有些渲染逻辑表达会比较啰嗦. 模板因为是专门针对渲染设计的 DSL, 所以写一些渲染逻辑时会特别的简洁和紧凑, 但学习成本高一些, 并且扩展需要通过指令和过滤器的方式.
4.react 是类式的写法, API 很少 而 vue 是声明式的写法, 通过传入各种 options,API 和参数都很多. 所以 react 结合 typescript 更容易一起写, vue 稍微复杂. vue 结合 vue-class-component 也可以实现类式的写法, 但是还是需要通过 decorator 来添加声明, 并不纯粹
5.react 可以通过高阶组件 (Higher Order Components--HOC) 来扩展, 而 vue 需要通过 mixins 来扩展 React 刚开始也有 mixin 的写法, 通过 React.createClass 的 API, 不过现在很少用了. Vue 也不是不能实现高阶组件, 只是特别麻烦, 因为 Vue 对与组件的 option 做了各种处理, 想实现高阶组件就要知道每一个 option 是怎么处理的, 然后正确的设置.
6.react 做的事情很少, 很多都交给社区去做, 交给社区去做的优势是可以产生很多优秀的方案, 但是会增加技术栈的学习成本和上手难度.
vue 很多东西都是内置的, 写起来确实方便一些, 内置的优势是技术栈学习成本低, 上手快, 但是方案变得不可替换了.
总结: 浓缩出来就是 思性路写扩射 这六个字的简便记忆方法我不便给你们描述, 我相信你们能悟出来, 实在想知道的私信我好吧
参考文档:
从 2 张运行流程图看 vue 和 react 区别: https://www.jianshu.com/p/1ebe36fbdcda
今天就到这里了, 各位继续加油!!!
来源: https://www.cnblogs.com/suihang/p/10098860.html