前端常用分类

pc 端开发方案

总体前端开发框架

框架	官网地址	团队	仓库地址
React	官网	Facebook	React
Vue	官网	Evan You	Vue

基于上述框架 主流

20 个开源 react UI 库

Ant Design 蚂蚁金服 --> react

Material-UI Google 的 Material Design --> react、 vue

Element-UI 饿了么 --> vue

Vuetify 国外开源项目 —> vue

移动端

Ant Design Mobile 蚂蚁金服 --> react

vant 有赞团队 --> vue

Nut-UI 京东风格 --> vue

滴滴 滴滴 —> vue

VUE 对比 REACT

vue 是一款渐进式框架，采用自底向上增量开发的设计

vue 由尤雨溪开发，由独立团队维护，现在大部分的子项目都交给团队成员打理，Vue 核心库依然主要由尤雨溪亲自维护。vue 近几年来特别的受关注，三年前的时候 angularJS 霸占前端 JS 框架市场很长时间，接着 react 框架横空出世，因为它有一个特性是虚拟 DOM，从性能上碾轧 angularJS，这个时候，vue1.0 悄悄的问世了，它的优雅，轻便也吸引了一部分用户，开始受到关注，16 年中旬，VUE2.0 问世，不管从性能上，还是从成本上都隐隐超过了 react，火的一塌糊涂，这个时候，angular 开发团队也开发了 angular2.0 版本，并且更名为 angular，吸收了 react、vue 的优点，加上 angular 本身的特点，也吸引到很多用户，目前已经迭代到 8.0 了。

react

react 主张函数式编程，所以推崇纯组件，数据不可变，单向数据流，当然需要双向的地方也可以手动实现，比如借助 onChange 和 setState 来实现一个双向的数据流。而 vue 是基于可变数据的，支持双向绑定，它提供了 v-model 这样的指令来实现文本框的数据流双向绑定。

编写语法

vue

vue 推荐的做法是 webpack+vue-loader 的单文件组件格式，vue 保留了 html、css、js 分离的写法，使得现有的前端开发者在开发的时候能保持原有的习惯，更接近常用的 web 开发方式，模板就是普通的 html，数据绑定使用 mustache 风格，样式直接使用 css。其中

react

用过 react 的开发者可能知道，react 是没有模板的，直接就是一个渲染函数，它中间返回的就是一个虚拟 DOM 树，React 推荐的做法是 JSX + inline style, 也就是把 HTML 和 CSS 全都写进 JavaScript 了,即’all in js’。JSX 实际就是一套使用 XML 语法，用于让我们更简单地去描述树状结构的语法糖。在 react 中，所有的组件的渲染功能都依靠 JSX。你可以在 render()中编写类似 XML 的语法，它最终会被编译成原生 JavaScript。不仅仅是 HTML 可以用 JSX 来表达，现在的潮流也越来越多地将 CSS 也纳入到 JavaScript 中来处理。JSX 是基于 JS 之上的一套额外语法，学习使用起来有一定的成本。

数据渲染比较

vue

vue 中的每个组件内部自动实现了
shouldComponentUpdate 的优化，在 vue 里面由于依赖追踪系统的存在，当任意数据变动的时，Vue 的每一个组件都精确地知道自己是否需要重绘，所以并不需要手动优化。用 vue 渲染这些组件的时候，数据变了，对应的组件基本上去除了手动优化的必要性。而在 react 中我们需要手动去优化其性能，但是当数据特别多的时候 vue 中的 watcher 也会特别多，从而造成页面卡顿，所以一般数据比较多的大型项目会倾向于使用 react。在 react 官网中，官方也建议我们使用 React 来构建快速响应的大型 Web 应用程序。

react

当 props 或 state 发生改变的时候会触发
shouldComponentUpdate 生命周期函数，它是用来控制组件是否被重新渲染的，如果它返回 true，则执行 render 函数，更新组件；如果它返回 false，则不会触发重新渲染的过程。
有的时候我们希望它在更新之前，和之前的状态进行一个对比，这个时候我们就需要重写
shouldComponentUpdate 来避免不必要的 dom 操作，对比当前的 props 或 state 和更新之后的 nextProps 或 nextState，返回 true 时 ，组件更新；返回 false，则不会更新，节省性能。