学习记录:
看了近10小时的开发文档(开发指南1-7),
因为没有连上后台 也没有用到express 所以数据都是静态的
主要是练习了组件间父子组件的通信和Angular2的基本开发
下面是对比同样页面用React和Angular2的不同感觉:
1.用知乎上的一个回复来讲:微软和google,一个总想全世界的代码都是C#,另一个总想全世界的代码都是Java.
Angular2给人的感觉就是..很Java
React给人感觉就是..很新. 毕竟再这之前没人提出过状态机的概念
2.对比父子组件通信
React:
1.父组件定义函数(or变量)
2.引入子组件同时传值
3.子组件通过this.props调用
//父组件
var parent = React.createClass({
render: function(){
//只要传递的方法放在标签里
return(
<child foo = {this.foo} />
)
},
foo:function(){...}
})
//子组件
var children = React.createClass({
render: function(){
//通过this.props调用父组件方法
return(
<button onClick={this.props.foo()}></button>
)
}
})
Angular2:(因为刚碰..我想应该有更好的通信方法的…)
1.声明服务类(service)
2.在父组件中 providers: [fooService]
3.构造器中注入constructor(private fooService : FooService){}
4.子组件构造器做同样的事情
(
注:如果不在构造器中 就需要
fooService : FooService = new FooService ();
但是这个在开发指南里是不建议的
以免FooService以后改动时候需要一同改所有引用过它的组件。
)
代码:
//父组件
import { FooService } from './service/FooService';
@Component({
....
templat:`
<div>{{fooService.name}}</div>
<child (output)="output($event)></child>
`,
providers: [FooService]
})
export class ParentComponent {
constructor(private fooService : FooService){}
output($event){
console.log('响应子组件')
}
}
//子组件
import {Output, EventEmitter} from '@angular/core';
import { FooService } from './service/FooService';
@Component({
....
templat:`
<button (click)="onClickMe(id)">click me!</button>
`
})
export class ChildrenComponent {
constructor(private fooService : FooService){}
@Output() output : EventEmitter<any> = new EventEmitter();
onClickMe(id : number){
this.habitService.id = id;
this.output.emit(id);
}
}
Angular可以通过service来让父子组件共享一个服务类,也可以通过input output的方法来通信。
对比Angular2和React
1.Angular在开发中速度比React更慢,逻辑管理相对更困难
2.Angular引入了typeScript,在知乎上有一条评论说:
如果几万~十几万的代码量,后期维护api返回数据改了一个,typeScript
的和Angular的双向绑定作用就出来了。可见,Angular更适用于大型
项目。
3.Angular建议每个component文件就一个组件 这样使得前端每个文件都被细化。特别赞templateUrl…就是..很赞。
4.因为Angular父子组件的通信并没有像React那么方便快捷,我在做React重构时候,会把所用页面的Button抽出来变成一个公用Button,大概思路是click—>disable:flase—>ajax.success—>disable:ture的这样一个防止未响应完成的多次click,但是这样的功能在Angular上…我还在思考能不能这样用。
总结:
目前来讲,React给我的感觉就像facebook说的只是一个view,组件=view+state,就是React。
Angular2的感觉是前端工程化,高度复用的东西 , 好像是service指令?