【前端】Angular和React的不同适用性对比表

2 年 ago
新, 韵
2 minutes

我做了一个总结表，列出了Angular和React两个框架之间的相似点，以便在已经了解Angular但不熟悉React的情况下，或者相反的情况下使用。

我正在学习React，并计划随时更新。个人感觉我会越来越喜欢Angular和React。

各版本的確認時間

項目バージョンOSwindows10node.js14.16.1Angular CLI11.2.9create-react-app4.0.3

请留意

    • 一部、見やすくするために閉じタグ</…>を省略して記述しています。

 

    • 任意の変数などの名称は代わりとしてanyを含ませた文字列で記述しています。

 

    • typescriptを使っています。

 

    細かいところなど不足があると思います。間違いなどあればご指摘お願いします。

CLI, 命令行界面等

説明AngularReactnpmパッケージ@angular/clicreate-react-appプロジェクト新規作成> ng new any-project> npx create-react-app any-project --template typescript実行> npm start> npm startポート番号42003000

追加模块

説明AngularReactディレクティブに渡す値の型の管理不要prop-typesルーティング不要react-router-dom, @types/react-router-domその他基本的に不要必要に応じて要追加

语法

説明AngularReact描画されないタグ<ng-container><React.Fragment> または <>子のタグ<app-any-component><AnyComponent>class属性class=""className=""for属性for=""htmlFor=""style属性style="width: 100px; background-color: #FAFAFA;"style={{width: '100px', backgroundColor: '#FAFAFA'}}その他属性any-property=""anyProperty=""コメント<!-- -->{/* */}属性に式の結果を渡すプロパティバインディング
[属性]="式"

例）<img [src]="anySrc" />式の埋め込み
属性={式}

例）<img src={anySrc} />イベントを扱うイベントバインディング
(イベント)="式"

例）<button (click)="anyFunction($event)">イベントハンドリング
イベント={イベントハンドラ}

例）<button onClick={this.anyFunction.bind(this)}>テンプレートに式を書くインターポレーション（補間）
{{ }}式の埋め込み
{ }htmlなどのセーフティ解除DomSanitizerdangerouslySetInnerHTML

组件之间的信息传递

説明AngularReact親から子へ@Input()

例）親: <app-child-component url="/any">

子: @Input() url = '',
<p>{{url}}</p>this.props, propTypes

例）親: <ChildComponent url="/any">

子: <p>{this.props.url}</p>子から親へ@Output(), EventEmitter, イベントバインディング, $event

例） 子: @Output() anyAction = new EventEmitter(),
anyAction.emit(anyValue)

親: <app-child-component (anyAction)="anyFunction($event)">props, state, setState(), イベントハンドリング, bind()

例）子: this.props.onAnyAction(this.state)

親: <ChildComponent onAnyAction={this.anyFunction.bind(this)} />外部コンテンツ<ng-content>{this.props.children}

条件分支、循环处理

説明AngularReact分岐処理*ngIf, *ngTemplateOutlet, ngSwitch, ngPlural三項演算子, &&演算子, 即時関数, 関数化繰り返し処理*ngFor

例）<app-any-component item="item" *ngFor="let item for items">map()

例）items.map(item => <AnyComponent item={item} />)リスト要素の追跡trackBy: トラッキング式key属性

生命周期方法

説明AngularReactコンストラクター（一度のみ）constructor()constructor()親コンポーネントからデータを（再度）受け取った後ngOnChanges()-コンポーネントの初期化時（一度のみ）ngOnInit()componentDidMount()状態の変更の検出時ngDoCheck()shouldComponentUpdate()外部コンテンツの初期化時（一度のみ）ngAfterContentInit()-外部コンテンツの更新チェック時ngAfterContentChecked()-子を含むビューの生成時（一度のみ）ngAfterViewInit()-子を含むビューの更新時ngAfterViewChecked()componentDidUpdate()コンポーネントが破棄される時ngOnDestroyed()componentWillUnmount()

路由

説明AngularReactルーティング用ファイルの有無any-routing.module.tsに記述必要に応じて任意のファイルに分割可能リンク<a routerLink="/"><Link to="/">lazy loading可能可能
bannerAds