链接：https://pan.baidu.com/s/1hckOklRr6VldcKsMMdw-IA 

提取码：evcp 

 

在分析两个框架之前，我们必须先了解他们各自的理念和对自己的定位

从它们官网直观来看，React 把自己描述为 “一个用于构建用户界面的 JavaScript 库”，而 Vue.js 则把自己描述为“渐进式 JavaScript 框架”。

React 是一个库（更少更轻量），而 Vue.js 是一个框架（要求和提供的能力更全面详尽）。我认为从很多方面来说，这是导致这些 UI 框架在执行方式上有所不同的根本原因。

1、创建组件

组件的组成通常由3部分组成UI（html）、行为（JavaScript）、外观（css）

 

1.1、vue和react组件的创建

Vue.js 的理念是使用单文件组件，用一种开箱即用的方式来编写涵盖所有 3 个部分的组件。

 

 

React 组件提供了开箱即用的 UI 和 行为部分，但是样式在很大程度上不受限制：

当然了，React 有一个非常活跃的社区，所以如果你想包含样式，可以轻松使用 Emotion 或 Styled Components 来填补样式的空缺

 

1.2、vue(Templates)与react（jsx）分析

在 React 中，一切都是 JavaScript。不仅仅是 HTML 可以用 JSX 来表达，现在的潮流也越来越多地将 CSS 也纳入到 JavaScript 中来处理。这类方案有其优点，但也存在一些不是每个开发者都能接受的取舍。

Vue 的整体思想是拥抱经典的 Web 技术，并在其上进行扩展。

1.2.1、JSX

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

2．JSX, 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的。

3．JSX 用来声明 React 当中的元素。

4．JSX本身也是一种表达式，在编译之后呢，JSX 其实会被转化为普通的 JavaScript 对象。这也就意味着，你其实可以在 if 或者 for 语句里使用 JSX，将它赋值给变量，当作参数传入，作为返回值都可以

5．JSX 说是手写的渲染函数有下面这些优势：你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的 (比如，linting、类型检查、编辑器的自动完成)。