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 组件使用自动注入完成组件类的创建