React 与 Angular 4 的最小粒度组件创建方式比较

React 与 Angular 4 的最小粒度组件创建方式比较

React 组件

需要引入的最小依赖：

• react
• react-dom

无状态组件

//组件定义
export default const ReactFormInput = (props) => {
  return (
    <div>
     <h2>ReactFormInput</h2>
     <div>
        <p>{props.label}: </p>
        <input type='text' value={props.value} />
        <div>propsValue:{props.value}</div>
     </div>
    </div>
  )  
}

//组件使用
import ReactFormInput from 'input';
let data = {
  label:'用户名',value:'李 宁'
};
//第一种调用方式：
<div>
  <ReactFormInput {...data}></ReactFormInput>
</div>

//第二种调用方式：
<div>
  {ReactFormInput({...data})}
</div>

ES6方式创建组件

//组件定义
export default class ReactFormInput extends React.Component{
  static defaultProps = {
    label:'用户名',value:'杨 洋'
  }
  constructor(props){
    super(...arguments);
    this.state = {};
  }

  render(){
    return (
      <div>
        <h2>ReactFormInput</h2>
        <div>
          <p>{this.props.label}: </p>
          <input type='text' value={this.props.value} />
          <div>propsValue:{this.props.value}</div>
        </div>
      </div>
    )
  }
}

//组件使用
import ReactFormInput from 'input';
<ReactFormInput label='用户名' value='李 宁'></ReactFormInput>

Angular 4 组件

需要引入的最小依赖：

• rxjs
• core-js
• zone.js
• @angular/core
• @angular/compiler
• @angular/common
• @angular/platform-browser
• @angular/plat-browser-dynamic

到目前最新版本为此，zone.js 可以不再依赖

import { Component,NgModule } from '@angular/core';
import { browserModule } from '@angular/platform-browser';

@Component({
  selector:'angular-form-input',template:`
    <p>angular 4 : angular-form-input</p>`
})
export class Angular4FormInput{}

@NgModule({
  imports:      [ browserModule],declarations: [Angular4FormInput],bootstrap:    [ Angular4FormInput ]
})
export class AppModule { }

//index.html
<angular-form-input>loading</angular-form-input>

通过以上代码可知

• React 的无状态组件使用时最为灵活和方便且最省布料
• React 组件的定义与使用最比Angular定义组件灵活
• React 组件的使用比Angular组件自由
• Angular 组件的定义更趋于组件化的概念
• Angular 组件使用自动注入完成组件类的创建