comparisons of Vue、Angular、React

Component

    Vue:    
            single file .vue
            template
            script
            style

            Vue.component('to-do-list',{
                template:``,
                methods:{},
                data:function(){return {}}
            })
    ng:
            import {Component} from '@angular/core'
            @Component({
                selector:'demo01',
                template/templateUrl:'',
                styleUrls:['assets/css/**.css',''],
                providers:[]
            })


    React:

                var Hello = React.createClass({
                render:function(){
                    return templete
                }
            })
    
            <Hello></Hello>

    tips：
        ①PascalCase required , no camelCase
        ②no new line in render func
        ③render mutiple tags in a container
        ④end tag is required

events binding

 vue:
        @click
ng:
        (click) 
react:
        onEvent={this.handleEvent}
        

children component sendMsg to parent component

    Vue:        
        events up 
        ①bind & receive
        rcvMsg:function(msg){
        }
        <son @customEvent="rcvMsg"></son>

        ②send & emit
            this.$emit(customEvent,123)
        
    Angular：
        events up
        ①bind & receive
            rcvMsg(msg){
            }
            <Son (customEvent)="rcvMsg($event)"></Son>
        ②send & emit
            import {output,EventEmitter} from '**'

            @Output() customEvent = new EventEmitter();

            this.customEvent.emit(123);
    
    React:  
        send a method with params through props
        ①define a custom method in parent component
            rcvMsg:function(msg){

            }
        ②bind in parent component
            <Son myFunc={this.rcvMsg}></Son>
        ③exec in children component
            this.props.myFunc(123)

reference

    <Son ref="mySon"></Son>
        get the instance of component or element through ref
        Vue:
            this.$refs.mySon
        angular:
            ViewChild
        React:
            this.refs.mySon

component lifecycle

    Vue：
        create mount update destroy

        beforeCreate
        created
        beforeMount
        mounted
        ...
    Angular
        onInit   onDestroy

        ngOnInit
        ngOnDestroy
        ...
    React
        
        mount update unmount
        
        componentWillMount
        componentDidMount

        componentWillUpdate
        componentDidUpdate

        componentWillUnmount

router

Vue
    vue-router  
        
        ①import
            <script src="js/vue-router.js"></script>
        
        ②container
            router-view

        ③config router dictionary
            new Vue({
                router:new VueRouter({
                    routes:[
                     {path:'',component:Login},
                    ]
                })
            })

        ④test
        the map between url and components



Angular
    RouterModule
    0 router-outlet
    ①create app.router.ts
    ②create custom module  app.router.ts
        
        import {RouterModule} from '@angular/router'
        
        const Routes = [
            {path:'',component:***}
        ]

        @NgModule({
            imports:[RouterModule.forRoot(Routes)],
            exports:[RouterModule]
        })

        export default class AppRoutingModule{}
    ③in app.module.ts，config root module
        import {AppRoutingModule} from './app.router'

        @NgModule({
            imports:[BrowserModule,HttpModule,FormsModule,AppRoutingModule]
        })


ReactNative:
        ①install
            npm install --save react-navigation
        ②create component

        ③config router dictionary
            import {StackNavigator} from 'react-navigation'
            import CartComponent from '***'
            import OrderConfirmComponent from '***'

            const RootNavigator = StackNavigator({
                cart:{
                    screen:CartComponent
                },
                oc:{
                    screen:OrderConfirmComponent
                }
            })

            AppRegistry.registerComponent('myapp', () => RootNavigator);

2、jump
    this.props.navigation.navigate('routeName');
    this.props.navigation.goBack()

3、jump with params  
    send
        this.props.navigation
        .navigate('routeName'，{price:100});
    receive
        this.props.navigation.state.params.price

network request

Vue：
   vue-resource
   this.$http.get().then()

Angular:
    ①create a service
    ②Http Response
        sendRequest(myUrl:string){
            return this.http.get(myUrl,{withCredentials:true}).map((response:Response)=>{
                return response.json()
            })
        }

    ③providers
    ④   import 
        instantiation
        this.myHS.sendRequest().subscribe(()=>{})



React：
        fetch(url)
            .then((response)=>{return response.json()})
            .then((result)=>{//result})