首页 > 语言 > JavaScript > 正文

VueJs与ReactJS和AngularJS的异同点

2024-05-06 15:05:15
字体:
来源:转载
供稿:网友

React && Vue

React 和 Vue 有许多相似之处,它们都有:

使用 Virtual DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件。 将注意力集中保持在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库。

由于有着众多的相似处,我们会用更多的时间在这一块进行比较。这里我们不只保证技术内容的准确性,同时也兼顾了平衡的考量。我们需要指出 React 比 Vue 更好的地方,像是他们的生态系统和丰富的自定义渲染器。

React && Vue的性能

渲染性能

在渲染用户界面的时候,DOM 的操作成本是最高的,不幸的是没有库可以让这些原始操作变得更快。
我们能做到的最好效果就是(来源google):

Minimize the number of necessary DOM mutations. Both React and Vue use virtual DOM abstractions to accomplish this and both implementations work about equally well.

Add as little overhead (pure JavaScript computations) as possible on top of those DOM manipulations. This is an area where Vue and React differ.

The JavaScript overhead is directly related to the mechanisms of computing the necessary DOM operations. Both Vue and React utilizes Virtual DOM to achieve that, but Vue's Virtual DOM implementation (a fork of snabbdom) is much lighter-weight and thus introduces less overhead than React's.

更新性能

In React, when a component's state changes, it triggers the re-render of the entire component sub-tree, starting at that component as root.

To avoid unnecessary re-renders of child components, you need to implement shouldComponentUpdate everywhere and use immutable data structures. In Vue, a component's dependencies are automatically tracked during its render, so the system knows precisely which components actually need to re-render.

也就是说,未经优化的 Vue 相比未经优化的 React 要快的多。由于 Vue 改进过渲染性能,甚至全面优化过的 React 通常也会慢于开箱即用的 Vue。

JSX vs Templates

在 React 中,所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 Javascript 的一种语法糖。

render () {  let { items } = this.props  let children  if ( items.length > 0 ) {    children = (      <ul>        {items.map( item =>          <li key={item.id}>{item.name}</li>        )}      </ul>    )  } else {    children = <p>No items found.</p>  }  return (    <div className = 'list-container'>      {children}    </div>  )}

JSX 的渲染功能有下面这些优势:

你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。
工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的(比如,linting、类型检查、编辑器的自动完成)。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选