(1)核心思想不同
vue:灵活易用的渐进式框架,进行数据拦截/代理,它对侦测数据的变化更敏感、更精确
react:React推崇函数式编程(纯组件),数据不可变以及单向数据流,
当然需要双向的地方也可以手动实现, 比如借助onChange
和setState
来实现
(2)组件写法差异
vue:Vue 推荐的做法是 template 的单文件组件格式,即 html,css,JS 写在同一个文件(vue也支持JSX写法)
react:React推荐的做法是JSX + inline style,
也就是把 HTML 和 CSS 全都写进 JavaScript 中,即 all in js
;
(3)diff算法不同
vue:updateChildren
是vue diff的核心, 过程可以概括为:
旧children
和新children
各有两个头尾的变量StartIdx
和EndIdx
,它们的2个变量相互比较,一共有4种比较方式- 如果4种比较都没匹配,如果设置了key,就会用key进行比较,在比较的过程中,变量会往中间靠,一旦
StartIdx>EndIdx
表明旧children
和新children
至少有一个已经遍历完了,就会结束比较
Vue2的核心Diff算法采用了双端比较的算法,同时从新旧children的两端开始进行比较,借助key值找到可复用的节点,再进行相关操作。相比React的Diff算法,同样情况下可以减少移动节点次数,减少不必要的性能损耗,更加的优雅
react:1)react首先对新集合进行遍历,for( name in nextChildren)
2)通过唯一key来判断老集合中是否存在相同的节点,如果没有的话创建
3)如果有的话,if (preChild === nextChild )
-
- 会将节点在新集合中的位置和在老集合中lastIndex进行比较
如果
if (child._mountIndex < lastIndex)
进行移动操作,否则不进行移动操作- 如果遍历的过程中,发现在新集合中没有,但在老集合中有的节点,会进行删除操作
(4)响应式原理不同
vue:
- Vue依赖收集,自动优化,数据可变
- Vue递归监听data的所有属性,直接修改
- 当数据改变时,自动找到引用组件重新渲染
react:
React基于状态机,手动优化,数据不可变,需要setState
驱动新的state替换老的state。当数据改变时,以组件为根目录,默认全部重新渲染, 所以 React 中会需要 shouldComponentUpdate
这个生命周期函数方法来进行控制
详细请访问链接,本文参考自此:https://blog.csdn.net/jin_kwok/article/details/80105462
标签:React,vue,区别,react,key,组件,children From: https://www.cnblogs.com/crazier/p/18162249