React 与 Angular 4 的最小粒度组件创建方式比较
发布时间:2020-12-15 06:44:45 所属栏目:百科 来源:网络整理
导读:React 与 Angular 4 的最小粒度组件创建方式比较 React 组件 需要引入的最小依赖: react react-dom 无状态组件 //组件定义export default const ReactFormInput = (props) = { return ( div h2ReactFormInput/h2 div p{props.label}: /p input type='text'
React 与 Angular 4 的最小粒度组件创建方式比较React 组件需要引入的最小依赖:
无状态组件 //组件定义 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 组件需要引入的最小依赖:
到目前最新版本为此,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> 通过以上代码可知
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |