前端流行框架大比拼

  • angular

  • vue

  • react

  • ant-design

angularjs

angular是个MVVM的框架。针对的是MVVM这整个事。angular的最主要的场景就是单页应用，或是有大量数据绑定的情况。

特性

  • 双向数据绑定

  • ioc依赖注入

  • 指令

上面这几点用起来确实很爽，随便指定个区域，配一个controller，然后里面的东西就都在scrope里了，确实很方便

如果各位想看，参见 https://github.com/i5ting/ionic_ninja/blob/master/angularjs/angularjs_sang.md

其实angular最好的实践是ionicframework的，读读ionic源码，才知道啥叫规范

vue

vue是尤同学写的一个MVVM中ViewModel中的库。是针对MVVM中的一层。应用的场景比较广，只想用vue功能的话就用。

  • Extendable Data bindings

  • Plain JS object models

  • API that simply makes sense

  • Build UI by composing components

  • Mix & matching small libraries

这个项目是非常活跃的，90后同学的精力很旺盛啊。

从最初的ViewModel做到今天的各种功能，做加法还真是挺可怕的事儿。

它的guide上说可以做Building Larger Apps，见http://vuejs.org/guide/application.html

各种路由，组件啥的都有，的确很强大

但是很多人都搞不定的，首先这么多概念就玩死一票人了，其次，它有太多东西需要自己去实现，就是可以复用的东西太少了，如果是小项目玩玩无所谓，如果是大的项目，水平一般的程序员是很难hold住的。

这就好比react出来，很好，但没有啥可复用的东西，写来是非常痛苦，所以在下面我介绍了react之后，给出了一个更好的基于react的解决方案。

reactjs

https://github.com/facebook/react

Virtual DOM

Virtual DOM是reactjs的最核心概念，我拷贝一段来说明它

在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因（如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。

React为此引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。

而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。

说那么多你可能都没明白，上例子

helloworld

var HelloMessage = React.createClass({

  render: function() {

    return <div>Hello {this.props.name}</div>;

  }});React.render(

  <HelloMessage name="John" />,

  document.getElementById('container'));

首先，这是一种 HTML-like 的语法，叫jsx，可以理解成coffee，typescript之类的，需要编译

核心就是React.render，说明这个组件放在什么地方，比如上面的例子就是

<div id='container'>

  ...
</div>

这样页面就可以拆分成n个小块，每块各自为政，即所谓的组件化（也就积木一样）

再来个复杂点的，下面给出的是带有状态的组件

var Input = React.createClass({

  getInitialState: function() {

    return {value: 'Hello!'};

  },

  handleChange: function(event) {

    this.setState({value: event.target.value});

  },

  render: function () {

    var value = this.state.value;

    return (

      <div>

        <input type="text" value={value} onChange={this.handleChange} />

        <p>{value}</p>

      </div>

    );

  }

});

React.render(<Input/>, document.body);

视图相关的3个概念

  • Props（属性，就是element上的attrs，换个名字property，变成复数，即props）

  • State（写过view组件的基本都会知道，按钮有三态，Normal，Highlight，Selected，包括extjs，jquery里的大部分ui框架都是有状态的。）

  • Event（其实还应该算一个就是dom事件，上面的例子就把onChange的handler编译后的handleChange方法，这要感谢jsx）

了解了上面这些，就可以写代码了，因为

  • 属性，解决了view的定义问题，即语义描述

  • 状态，是view的有穷状态机，根据状态决定ui和行为

  • 事件，是view里元素的行为

单独的view的话，实际上上面的东西已经足够了，但是往往我们用的时候是view和viewController一起用的。

但reactjs里并没有却分这个，也就是说view和controller都在组件里，比如ios的但是往往我们用的时候是view和viewController里就有很多生命周期方法，这些在reackjs里也被实现了

组件的生命周期

组件的生命周期，另外的名字是状态回调，和上面讲的状态的唯一差别，上面的状态是它里面的元素，而组件的生命周期是它自己

组件的生命周期分成三个状态：

  • Mounting：已插入真实 DOM

  • Updating：正在被重新渲染

  • Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

  • componentWillMount()

  • componentDidMount()

  • componentWillUpdate(object nextProps, object nextState)

  • componentDidUpdate(object prevProps, object prevState)

  • componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

  • componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

  • shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

FAQ

1）很多人最常问的问题：比如和jQuery集成可以吗？

reactjs很小，并没有jq提供的功能，可以说它们是互补的，可以结合着使用

2）react比angular好用吗？

reactjs是组件化的最佳实践，但angularjs的mvvm等好用功能，它是没有的，所以更好用说不上，姑且可以认为各有千秋吧

总结

总结一下，关于reactjs，我没有讲virtual dom，而是主要讲了4个概念

  • 属性

  • 状态

  • 事件

  • 生命周期

如果你掌握了这4点，实际上就已经可以很好的使用reactjs了，比如一般view是要和ajax放到一起用的，这时候，只要在组件的生命周期里处理即可，实际上也还是上面的东西，此处就不罗嗦了。

todo（reactjs高级篇）

  • 加点 路由和 数据单向流的 东西吧

  • 或者 是服务器端渲染的 数据请求逻辑 什么的

  • 如果能用redux 和express做个例子 那就更好了

ant-design

https://github.com/ant-design

特性

  • 提炼自企业级后台产品的交互语言和视觉风格。

  • 丰富实用的 React UI 组件。

  • 基于 React 的组件化开发模式。

  • 背靠 npm 生态圈。

  • 基于 webpack 的调试构建方案，支持 ES6。

我们来换一种说法

  • 基于react组件化

  • 代码在npm里，做到模块化

  • 通过webpack构建，更灵活

至于说es几，那只是噱头而已

通过npm，可以更好的和nodejs结合，利用node的生态来扩展，其实bower等也类似，但对package.json不友好，所以我是很看好这种方式的。

以后js大一统，npm就不在只是nodejs package manager的，而是js package manager

另外它的界面设计的很好，模块化的做的也很好，我非常喜欢，唯一的缺点是它对nodejs的版本要求太高了，会让一小部分人不适应的。

全栈之路

  • js是首选

  • rails也不错

  • 其他，要折腾很久

总结

大家可能都有的疑问，这么技术非常好，我的项目要不要上呢？

先从项目维度看

  • 小项目，无所谓，可以尝鲜，填坑和重写一样简单

  • 大项目，伤不起啊，如果不成熟或者无良好生态，当慎重，经得起诱惑

从人的维度看

  • 牛人，无所谓，反正时间和能力都能挤出来，能学到很多东西，但也也要打进去很多夜晚

  • 其他人，量力而行

我不会在公司项目里使用vue，但我赞成evan的做法，虽然不提倡造轮子，但问题反过来看，它又何尝不是一个技术人的热爱呢？

生命不息，折腾又怎会停止,前端或者说js领域的变化越来越快，大家准备好迎接可能是机遇也可能是灾难的明天吧，加油！

2015前端各大框架比较（angular,vue,react,ant）的更多相关文章

  1. 前端三大框架（Angular Vue React）

    前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...

  2. Angular Vue React 框架中的 CSS

    框架中的 CSS Angular Vue React 三大框架 Angular Vue 内置样式集成 React 一些业界实践 Angular Angular . js (1.x):没有样式集成能力 ...

  3. angular vue react web前端三大主流框架的对比

    首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分 ...

  4. 三大框架知识点比较（Angular, Vue, React）

    点击左键 => 拖拽图片 => 新标签页查看图片 => 放大拖拽查阅

  5. angular,vue,react的父子通信

    父子通信 父传子 vue: 父组件:<child :msg="datamsg" ></child> //子组件的msg属性上加数据,datamsg是数据 子 ...

  6. angular,vue,react的基本语法—样式处理

    基本语法 样式处理: vue: 动态属性: v-bind:class 简写 :class react: 变量:class={selecter} angular: 指令:[ngClass]=" ...

  7. angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例

    基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...

  8. angular,vue,react的基本语法—动态属性、事件绑定、ref，angular组件创建方式

    基本语法: 动态属性: vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]= ...

  9. angular,vue,react的基本语法—插值表达式，渲染数据，响应式数据

    基本语法: 1.插值表达式: vue:{{}} react:{} angular:{{}} 2.渲染数据 vue js: export default{ data(){ return{ msg:&qu ...

随机推荐

  1. 全排列 UVA 11525 Permutation

    题目传送门 题意:训练指南P248 分析:逆向考虑,比如一个全排列:7345261,它也可以表示成题目中的形式,第一个数字7是由6 * (7 - 1)得到的,第二个数字3有2 * (7 - 2)得到, ...

  2. 【java报错】Could not instantiate listener

    这个错误以前出现过好几次,莫名其妙的出现,莫名其妙的解决掉...昨天好好的,今天又出现了,记下来 2015-03-03 09:38:45.105:INFO:oejs.Server:jetty-8.1. ...

  3. parsing html in asp.net

    http://stackoverflow.com/questions/5307374/parsing-html-page-in-asp-net http://htmlagilitypack.codep ...

  4. 337. House Robber III

    二刷吧..不知道为什么house robbery系列我找不到笔记,不过印象中做了好几次了. 不是很难,用的post-order做bottom-up的运算. 对于一个Node来说,有2种情况,一种是选( ...

  5. asp.net微信开发第五篇----用户分组管理

    上一篇已讲解到新建用户分组,移动用户到分组的功能,这一章主要讲解修改分组名称和删除分组 开发者可以使用接口,对公众平台的分组进行查询.创建.修改.删除等操作,也可以使用接口在需要时移动用户到某个分组. ...

  6. volatile作用及相关集合类

    在工作一年多之后,java程序员都会了解到volatile 这个修饰符, 其在多线程环境下解决了long/double写操作的原子性.基本变量的可见性.通过建立内存屏障保证指令有序性 那么在哪些Jav ...

  7. Android之SharedPreferences内部原理浅析

    SharedPreferences内部工作原理: 1.调用getSharedPreferences();创建一个SharedPreferences对象,其中会先判断是否存在对应xml文件,如果发现存在 ...

  8. 【Oracle RAC】Linux系统Oracle12c RAC安装配置详细记录过程V2.0（图文并茂）

    [Oracle RAC]Linux系统Oracle12c RAC安装配置详细过程V2.0(图文并茂) 2 Oracle12c RAC数据库安装准备工作2.1 安装环境介绍2.2 数据库安装软件下载3 ...

  9. IEnumerable&lt;T&gt;和IQueryable&lt;T&gt;区分

    LINQ查询方法一共提供了两种扩展方法,在System.Linq命名空间下,有两个静态类:Enumerable类,它针对继承了IEnumerable<T>接口的集合进行扩展:Queryab ...

  10. 在vue-cli中引用公共过滤器filter

    在实际项目开发中,在某一组件中声明的全局过滤器Vue.filter并不能在其他组件中使用,所以,我认为只要调用两次以上或者可能会被调用两次以上的过滤器,就应该写入统一个过滤器文件中,方便统一调用.下面 ...