Javascript

细说React&&Vue同异

本文主要是介绍细说React&&Vue同异,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

设计相同点

  • 使用Virtual DOM
  • 提供了响应式和组件化的试图组件
  • 将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库

性能

  • 都非常快,所以速度并不是在它们之中做选择都决定性因素
  • 如果要避免不必要的子组件渲染,可以在React中使用PureComponent或是手动实现shouldComponentUpdate,

注意

React.PureComponent 中的 shouldComponentUpdate() 仅作对象的浅层比较。如果对象中包含复杂的数据结构,则有可能因为无法检查深层的差别,产生错误的比对结果。仅在你的 props 和 state 较为简单时,才使用 React.PureComponent,或者在深层数据结构发生变化时调用 forceUpdate() 来确保组件被正确地更新。你也可以考虑使用 immutable 对象加速嵌套数据的比较。

此外,React.PureComponent 中的 shouldComponentUpdate() 将跳过所有子组件树的 prop 更新。因此,请确保所有子组件也都是“纯”的组件。

  • 在 Vue 应用中,组件的依赖是在渲染过程中自动追踪的,所以系统能精确知晓哪个组件确实需要被重渲染。你可以理解为每一个组件都已经自动获得了 shouldComponentUpdate,并且没有上述的子树问题限制。

书写

  • React all in JS
  • Vue 虽然同时支持JSX和Templates但是针对Templates在模版编译阶段做了很多优化。

数据流管理

  • React要配合Redux或者Mobx,这两个我都写了很长时间,总体感觉是Redux由于社区发展都较早,用的人多所以各种插件很全,促进Redux更强大,但是Redux样板代码多使用起来较为繁琐。Mobx方便了很多,很容易上手,所以这几年在React社区很流行,它的设计哲学不同于Redux、Vuex的单向数据流,而是"任何源自应用状态的东西都应该自动地获得"。
  • Vue自带了Vuex,和Redux思想很接近,但是用法有些不同。
 Redux:
  view——>actions——>reducer——>state变化——>view变化(同步异步一样)
  
 Vuex:
  view——>commit——>mutations——>state变化——>view变化(同步操作)
  
  view——>dispatch——>actions——>mutations——>state变化——>view变化(异步操作)
  
复制代码
  • redux 数据流程图

  • vuex 数据流程图

  • vuex Mobx数据流程图

这篇关于细说React&&Vue同异的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!