Happy-everyday
react与vue区别
React 与 Vue 有很多相似之处,React 和 Vue 都是非常优秀的框架,它们之间的相似之处多过不同之处,并且它们大部分最棒的功能是相通的,如他们都是 JavaScript 的 UI 框架,专注于创造前端的富应用。不同于早期的 JavaScript 框架“功能齐全”,React 与 Vue 只有框架的骨架,其他的功能如路由、状态管理等是框架分离的插件。
相同点
- 两者都是用于创建 UI 的 JavaScript 库。
- 两者都快速轻便。
- 都有基于组件的架构。
- 都是用虚拟 DOM。
- 都可放入单个 HTML 文件中,或者成为更复杂 webpack 设置中的模块。
- 都有独立但常用的路由器和状态管理库。
不同点
- 它们之间的最大区别是 Vue 通常使用 HTML 模板文件,而 React 则完全是 JavaScript。Vue 有双向绑定语法糖。
- Vue 组件分为全局注册和局部注册, React 中都是通过 import 相应组件,然后模版中引用;
- Vue的props 是可以动态变化的,子组件也实时更新, React 中官方建议 props 要像纯函数那样,输入输出一致对应,而且不太建议通过 props 来更改视图;
- Vue中子组件一般要显式的调用 props 选项来声明它期待获得的数据。而在 React 中不必需,另两者都有 props 校验机制;
- 每个 Vue 实例都实现了事件接口,方便父子组件通信,小型项目中不需要引入状态管理机制,而 React 必需自己实现;
- Vue使用插槽分发内容,做到了混合父组件的内容与子组件自己的模板。多了指令系统,让模版可以实现更丰富的功能, React 只能使用 JSX 语法;
- Vue 增加的语法糖 computed 和 watch,但在 React 中需要自己写一套逻辑来实现。
- Vue 是把 html,css,js 组合到一起,用各自的处理方式,vue 有单文件组件,可以把 html、css、js 写到一个文件中,html 提供了模板引擎来处理。React 的思路是 all in js,通过 js 来生成 html,所以设计了 jsx,还有通过 js 来操作 css,社区的 styled-component、jss 等。
- React 做的事情很少,很多都交给社区去做,vue 很多东西都是内置的,写起来确实方便一些, 比如 redux 的 combineReducer 就对应 vuex 的 modules, 比如 reselect 就对应 vuex 的 getter 和 vue 组件的 computed, vuex 的 mutation 是直接改变的原始数据,而 redux 的 reducer 是返回一个全新的 state,所以 redux 结合 immutable 来优化性能,vue 不需要。
- React 是整体的思路的就是函数式,所以推崇纯组件,数据不可变,单向数据流,当然需要双向的地方也可以做到,比如结合 redux-form,组件的横向拆分一般是通过高阶组件。 Vue 是数据可变的,双向绑定,声明式的写法,vue 组件的横向拆分很多情况下用 mixin。
两者近况
- 可以看出 vue 的 star 数量已经是前端框架中最火爆的。从维护上来看,react 是 facebook 在维护,而 vue 现阶段虽然也有了团队,但主要还是尤雨溪在维护贡献代码,并且阿里巴巴开源的混合式框架 weex 也是基于 vue 的,所以我们相信 vue 未来将会得到更多的人和团队维护。
- 根据不完全统计,包括饿了么、简书、高德、稀土掘金、苏宁易购、美团、天猫、荔枝 FM、房多多、Laravel、htmlBurger 等国内外知名大公司都在使用 Vue 进行新项目的开发和旧项目的前端重构工作。
- 使用 React 的公司 facebook、Twitter、INS、Airbnb、Yahoo、ThoughtWorks、蚂蚁金服、阿里巴巴、腾讯、百度、口碑、美团、滴滴出行、饿了么、京东、网易等UI 生态
- vue react pc 端 iview、element 等 Ant Design、Materal-UI 等 h5 端 有赞 vant、mintui 等 Ant Design Mobile、weui 混合开发 weexui、bui-weex teaset、react-native-elements 微信小程序 iview、Weapp、zanui iView Weapp、Taro UI 无论您选择React.js还是Vue.js,两个框架都没有相当大的差异,根据您的要求,这个决定是非常主观的。如果您想将前端JavaScript框架集成到现有应用程序中,Vue.js是更好的选择,如果您想使用JavaScript构建移动应用程序,React绝对是您的选择。
侧重点不同吧。vue偏中小型项目,上手入门快,react适合于大型项目。
小插曲之自适应
<script>
// 自适应代码
(function (win) {
var doc = win.document;
var docEl = doc.documentElement;
var tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width > 750) { // 最大宽度
width = 750;
}
var rem = width / 3.75;
docEl.style.fontSize = rem / 2 + 'px';
}
win.addEventListener('resize', function () {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function (e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
refreshRem();
})(window);
</script>