vue和react的区别

React:
他是facebook创建的javascriptUi框架,React与当时流行的jquery等不同,React推广了 Virtual DOM( 虚拟 DOM )并创造了 JSX 语法。JSX 语法的出现允许我们在 javascript 中书写 HTML 代码。

VUE :
解决问题跟react一致,但是他提供了另外一种方案,VUE的模板系统就是普通的html,css,js页面,淡化了jsx写法,这样更直观,因其实模板系统都是用的普通的 HTML,所以对应用的升级更方便、更容易,而不需要整体重构。

React生命周期

vue和react的区别

VUE生命周期:vue和react的区别

React 整体是函数式的思想,在 React 中是单向数据流,推崇结合 immutable 来实现数据不可变。而 Vue 的思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立 Watcher 来监听,当属性变化的时候,响应式的更新对应的虚拟 DOM。React还提供了React Hooks供开发者更便捷的开发一个全功能的函数组件,可以利用Hooks实现性能优化,组件逻辑拆分等工作。

如上,所以 React 的性能优化需要手动去做,而Vue的性能优化是自动的,但是Vue的响应式机制也有问题,就是当 state 特别多的时候,Watcher 会很多,会导致卡顿。

React Redux和vue-vuex的区别

vuex工作流程:

vue和react的区别

每一个 Vuex 应用的核心就是 store,里面又包括:
(1)state(数据):存放数据源的地方;
(2)getters(数据加工):对数据源进行加工,返回需要的数据;
(3)actions(事件):要执行的操作,可以进行同步或者异步事件
(4)mutations(执行):操作结束之后,actions通过commit更新state数据源

所以,简单的来说,vuex的工作流程就是:
(1)通过dispatch去提交一个actions,
(2) actions接收到这个事件之后,在actions中可以执行一些异步|同步操作,根据不同的情况去分发给不同的mutations,
(3)actions通过commit去触发mutations,
(4)mutations去更新state数据,state更新之后,就会通知vue进行渲染

redux工作流程: 

vue和react的区别

 

 每一个 Redux 应用的核心也是store,里面包括:
(1)store(数据):存放数据源的地方;
(2)reducers(执行):将接收到的数据更新到store;
(3)action(事件):被派发的事件,是 store 数据的唯一来源
(4)dispatch(派发):每一个React components都可以派发一个时间,通知reducer更新store   中的数据

redux和vue-vuex都遵从单向数据原则,目前看起来使用redux相对于vuex会繁琐一些,但是react提供了react-redux、redux-saga、redux-thunk等中间件便于我们更便捷的操作store中的数据。相比于vuex来说,redux的操作更清晰明了,任何数据的变更必定dispatch一个action,通过监听action发送请求,通过generator将请求成功后返回的数据通过action传送给reducer更新Store中的数据,从而更新页面。

总结

VUE和React都是以组件化为核心的前端框架,相比于VUE,React开放性更大,你可以封装类组件或者函数组件,使用Hooks实现你想要的效果,没有VUE那么多的限制。如果你想快速搭建一个网站,具有良好的轻便性和可维护性建议使用VUE,但是如果项目较为复杂,开发人员较多时建议使用react + typescript,将大部分数据存放到redux中,避免了页面传参,返回之后数据处理等等问题。使用typescript规范前端代码,确定入参出参,后期换人维护时也能清晰的理解代码逻辑。

上一篇:react antd按需加载报错


下一篇:MVCC