前端流行框架大比拼

  • 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. 前端两大框架 vue 和 react 的区别

    1. 设计思想 vue: vue的官网介绍说vue是一种渐进式框架,采用自底向上增量开发的设计: react: 采用函数式编程,推崇纯组件,数据不可变,单向数据流: 2. 编写语法 vue: 采用单文 ...

  5. 三大框架知识点比较(Angular, Vue, React)

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

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

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

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

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

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

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

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

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

随机推荐

  1. 12.URL重写

    为什么要URL重写?1.有利于SEO(搜索引擎优化),带参数的RUL权重较低.2.地址看起来更正规,推广uid. 如我们一般在访问网页是会带参数,http://aaa.com/view.htm?id= ...

  2. applicationDefaultJvmArgs:

    server.context-path=/HelloMultiServlet server.port=8080 applicationDefaultJvmArgs: [ "-agentlib ...

  3. 火车车次查询-余票查询--Api接口

    1.来自12306的火车车次数据 使用12306网站的接口,查询余票.此接口采集自 这里. 全国火车站代号字典,下载 . 火车票余票查询 http://dynamic.12306.cn/otsquer ...

  4. init进程 && 解析Android启动脚本init.rc && 修改它使不启动android && init.rc中启动一个sh文件

    Android启动后,系统执行的第一个进程是一个名称为init 的可执行程序.提供了以下的功能:设备管理.解析启动脚本.执行基本的功能.启动各种服务.代码的路径:system/core/init,编译 ...

  5. ♫【网站优化】Reflow / Repaint

    web移动开发最佳实践之js篇 浏览器的回流与重绘 by 张盛志 DOM性能瓶颈与Javascript性能优化 浏览器的渲染原理简介 其中一个跟浏览器有关的原因,那就是浏览器需要花时间.花精力去渲染. ...

  6. 清理ms sql server 大日志文件数据

    1.手动分离数据库: 2.手动删除日志文件: 3.重新生成日志文件: CREATE DATABASE FMIS0 ON (FILENAME = 'E:\FMIS0_DATA\FMIS0-Date') ...

  7. EF多表查询方式

    5, 连接 可以的连接有Join 和 GroupJoin 方法.GroupJoin组联接等效于左外部联接,它返回第一个(左侧)数据源的每个元素(即使其他数据源中没有关联元素). using (var ...

  8. 使用Hexo搭建github博客步骤,超简便

    categories: 工具 tags: git Windows 搭建博客 你只需要node环境和一个github账号就可以开工啦! 本教程适合于Windows环境,Mac教程也大同小异 利用hexo ...

  9. JavaScript高级程序设计30.pdf

    第12章 DOM2和DOM3 DOM1级主要定义的是HTML和XML文档的底层结构.DOM2和DOM3则在这个结构的基础上引入了更多的交互能力,也支持更高级的XML特性 DOM2和DOM3级分为许多模 ...

  10. (转载)反编译android的apk文件步骤

    下面的方法我已经尝试过,完全可以成功,重点的步骤我在这里说一下 1.必须要有java环境,记得配置好环境变量 2.如果只查看class中的函数文件,只需要下载dex2jar和jd-gui 3.下载地址 ...