Immutable & Redux in Angular Way

lunaticf 發(fā)布于2019-08-20 17:35 / 886人閱讀

摘要：來源于社區(qū)，時至今日已經(jīng)基本成為的標(biāo)配了。部分很簡單，要根據(jù)傳入的執(zhí)行不同的操作。當(dāng)性能遇到瓶頸時基本不會遇到，可以更改，保證傳入數(shù)據(jù)來提升性能。當(dāng)不再能滿足程序開發(fā)的要求時，可以嘗試使用進(jìn)行函數(shù)式編程。

Immutable & Redux in Angular Way 寫在前面

AngularJS 1.x版本作為上一代MVVM的框架取得了巨大的成功，現(xiàn)在一提到Angular，哪怕是已經(jīng)和1.x版本完全不兼容的Angular 2.x（目前最新的版本號為4.2.2），大家還是把其作為典型的MVVM框架，MVVM的優(yōu)點(diǎn)Angular自然有，MVVM的缺點(diǎn)也變成了Angular的缺點(diǎn)一直被人詬病。

其實(shí)，從Angular 2開始，Angular的數(shù)據(jù)流動完全可以由開發(fā)者自由控制，因此無論是快速便捷的雙向綁定，還是現(xiàn)在風(fēng)頭正盛的Redux，在Angular框架中其實(shí)都可以得到很好的支持。

Mutable

我們以最簡單的計數(shù)器應(yīng)用舉例，在這個例子中，counter的數(shù)值可以由按鈕進(jìn)行加減控制。

counter.component.ts代碼

import { Component, ChangeDetectionStrategy, Input } from "@angular/core";

@Component({
  selector       : "app-counter",
  templateUrl    : "./counter.component.html",
  styleUrls      : []
})
export class CounterComponent {
  @Input()
  counter = {
    payload: 1
  };
  
  increment() {
    this.counter.payload++;
  }

  decrement() {
    this.counter.payload--;
  }

  reset() {
    this.counter.payload = 1;
  }

}

counter.component.html代碼

Counter: {{ counter.payload }}

現(xiàn)在我們增加一下需求，要求counter的初始值可以被修改，并且將修改后的counter值傳出。在Angular中，數(shù)據(jù)的流入和流出分別由@Input和@Output來控制，我們分別定義counter component的輸入和輸出，將counter.component.ts修改為

import { Component, Input, Output, EventEmitter } from "@angular/core";
@Component({
  selector   : "app-counter",
  templateUrl: "./counter.component.html",
  styleUrls  : []
})
export class CounterComponent {
  @Input() counter = {
    payload: 1
  };
  @Output() onCounterChange = new EventEmitter();

  increment() {
    this.counter.payload++;
    this.onCounterChange.emit(this.counter);
  }

  decrement() {
    this.counter.payload--;
    this.onCounterChange.emit(this.counter);
  }

  reset() {
    this.counter.payload = 1;
    this.onCounterChange.emit(this.counter);
  }
}

當(dāng)其他component需要使用counter時，app.component.html代碼

app.component.ts代碼

import { Component } from "@angular/core";
@Component({
  selector   : "app-root",
  templateUrl: "./app.component.html",
  styleUrls  : [ "./app.component.less" ]
})
export class AppComponent {
  initCounter = {
    payload: 1000
  }

  onCounterChange(counter) {
    console.log(counter);
  }
}

在這種情況下counter數(shù)據(jù)

會被當(dāng)前counter component中的函數(shù)修改

也可能被initCounter修改

如果涉及到服務(wù)端數(shù)據(jù)，counter也可以被Service修改

在復(fù)雜的應(yīng)用中，還可能在父component通過@ViewChild等方式獲取后被修改

框架本身對此并沒有進(jìn)行限制，如果開發(fā)者對數(shù)據(jù)的修改沒有進(jìn)行合理的規(guī)劃時，很容易導(dǎo)致數(shù)據(jù)的變更難以被追蹤。

與AngularJs 1.x版本中在特定函數(shù)執(zhí)行時進(jìn)行臟值檢查不同，Angular 2+使用了zone.js對所有的常用操作進(jìn)行了monkey patch，有了zone.js的存在，Angular不再像之前一樣需要使用特定的封裝函數(shù)才能對數(shù)據(jù)的修改進(jìn)行感知，例如ng-click或者$timeout等，只需要正常使用(click)或者setTimeout就可以了。

與此同時，數(shù)據(jù)在任意的地方可以被修改給使用者帶來了便利的同時也帶來了性能的降低，由于無法預(yù)判臟值產(chǎn)生的時機(jī)，Angular需要在每個瀏覽器事件后去檢查更新template中綁定數(shù)值的變化，雖然Angular做了大量的優(yōu)化來保證性能，并且成果顯著（目前主流前端框架的跑分對比），但是Angular也提供了另一種開發(fā)方式。

Immutable & ChangeDetection

在Angular開發(fā)中，可以通過將component的changeDetection定義為ChangeDetectionStrategy.OnPush從而改變Angular的臟值檢查策略，在使用OnPush模式時，Angular從時刻進(jìn)行臟值檢查的狀態(tài)改變?yōu)閮H在兩種情況下進(jìn)行臟值檢查，分別是

當(dāng)前component的@Input輸入值發(fā)生更換

當(dāng)前component或子component產(chǎn)生事件

反過來說就是當(dāng)@Input對象mutate時，Angular將不再進(jìn)行自動臟值檢測，這個時候需要保證@Input的數(shù)據(jù)為Immutable

將counter.component.ts修改為

import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from "@angular/core";
@Component({
  selector       : "app-counter",
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl    : "./counter.component.html",
  styleUrls      : []
})
export class CounterComponent {
  @Input() counter = {
    payload: 1
  };
  @Output() onCounterChange = new EventEmitter();

  increment() {
    this.counter.payload++;
    this.onCounterChange.emit(this.counter);
  }

  decrement() {
    this.counter.payload--;
    this.onCounterChange.emit(this.counter);
  }

  reset() {
    this.counter.payload = 1;
    this.onCounterChange.emit(this.counter);
  }
}

將app.component.ts修改為

import { Component } from "@angular/core";
@Component({
  selector   : "app-root",
  templateUrl: "./app.component.html",
  styleUrls  : [ "./app.component.less" ]
})
export class AppComponent {
  initCounter = {
    payload: 1000
  }

  onCounterChange(counter) {
    console.log(counter);
  }

  changeData() {
    this.initCounter.payload = 1;
  }
}

將app.component.html修改為

這個時候點(diǎn)擊change發(fā)現(xiàn)counter的值不會發(fā)生變化。

將app.component.ts中changeData修改為

changeData() {
  this.initCounter = {
    ...this.initCounter,
    payload: 1
  }
}

counter值的變化一切正常，以上的代碼使用了Typescript 2.1開始支持的 Object Spread，和以下代碼是等價的

changeData() {
  this.initCounter = Object.assign({}, this.initCounter, { payload: 1 });
}

在ChangeDetectionStrategy.OnPush時，可以通過ChangeDetectorRef.markForCheck()進(jìn)行臟值檢查，官網(wǎng)范點(diǎn)擊此處，手動markForCheck可以減少Angular進(jìn)行臟值檢查的次數(shù)，但是不僅繁瑣，而且也不能解決數(shù)據(jù)變更難以被追蹤的問題。

通過保證@Input的輸入Immutable可以提升Angular的性能，但是counter數(shù)據(jù)在counter component中并不是Immutable，數(shù)據(jù)的修改同樣難以被追蹤，下一節(jié)我們來介紹使用Redux思想來構(gòu)建Angular應(yīng)用。

Redux & Ngrx Way

Redux來源于React社區(qū)，時至今日已經(jīng)基本成為React的標(biāo)配了。Angular社區(qū)實(shí)現(xiàn)Redux思想最流行的第三方庫是ngrx，借用官方的話來說RxJS powered，inspired by Redux，靠譜。

如果你對RxJS有進(jìn)一步了解的興趣，請?jiān)L問https://rxjs-cn.github.io/rxj...

基本概念

和Redux一樣，ngrx也有著相同View、Action、~~Middleware~~、Dispatcher、Store、Reducer、State的概念。使用ngrx構(gòu)建Angular應(yīng)用需要舍棄Angular官方提供的@Input和@Output的數(shù)據(jù)雙向流動的概念。改用Component->Action->Reducer->Store->Component的單向數(shù)據(jù)流動。

以下部分代碼來源于CounterNgrx和這篇文章

我們使用ngrx構(gòu)建同樣的counter應(yīng)用，與之前不同的是這次需要依賴@ngrx/core和@ngrx/store

Component

app.module.ts代碼，將counterReducer通過StoreModule import

import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {FormsModule} from "@angular/forms";
import {HttpModule} from "@angular/http";

import {AppComponent} from "./app.component";
import {StoreModule} from "@ngrx/store";
import {counterReducer} from "./stores/counter/counter.reducer";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    StoreModule.provideStore(counterReducer),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

在NgModule中使用ngrx提供的StoreModule將我們的counterReducer傳入

app.component.html

Counter: {{ counter | async }}

注意多出來的async的pipe，async管道將自動subscribe Observable或Promise的最新數(shù)據(jù)，當(dāng)Component銷毀時，async管道會自動unsubscribe。

app.component.ts

import {Component} from "@angular/core";
import {CounterState} from "./stores/counter/counter.store";
import {Observable} from "rxjs/observable";
import {Store} from "@ngrx/store";
import {DECREMENT, INCREMENT, RESET} from "./stores/counter/counter.action";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  counter: Observable;

  constructor(private store: Store) {
    this.counter = store.select("counter");
  }

  increment() {
    this.store.dispatch({
      type: INCREMENT,
      payload: {
        value: 1
      }
    });
  }

  decrement() {
    this.store.dispatch({
      type: DECREMENT,
      payload: {
        value: 1
      }
    });
  }

  reset() {
    this.store.dispatch({type: RESET});
  }
}

在Component中可以通過依賴注入ngrx的Store，通過Store select獲取到的counter是一個Observable的對象，自然可以通過async pipe顯示在template中。

dispatch方法傳入的內(nèi)容包括type和payload兩部分， reducer會根據(jù)type 和payload生成不同的state，注意這里的store其實(shí)也是個Observable對象，如果你熟悉Subject，你可以暫時按照Subject的概念來理解它，store也有一個next方法，和dispatch的作用完全相同。

Action

counter.action.ts

export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
export const RESET     = "RESET";

Action部分很簡單，reducer要根據(jù)dispath傳入的action執(zhí)行不同的操作。

Reducer

counter.reducer.ts

import {CounterState, INITIAL_COUNTER_STATE} from "./counter.store";
import {DECREMENT, INCREMENT, RESET} from "./counter.action";
import {Action} from "@ngrx/store";

export function counterReducer(state: CounterState = INITIAL_COUNTER_STATE, action: Action): CounterState {
  const {type, payload} = action;

  switch (type) {
    case INCREMENT:
      return {...state, counter: state.counter + payload.value};

    case DECREMENT:
      return {...state, counter: state.counter - payload.value};

    case RESET:
      return INITIAL_COUNTER_STATE;

    default:
      return state;
  }
}

Reducer函數(shù)接收兩個參數(shù)，分別是state和action，根據(jù)Redux的思想，reducer必須為純函數(shù)(Pure Function)，注意這里再次用到了上文提到的Object Spread。

Store

counter.store.ts

export interface CounterState {
  counter: number;
}

export const INITIAL_COUNTER_STATE: CounterState = {
  counter: 0
};

Store部分其實(shí)也很簡單，定義了couter的Interface和初始化state。

以上就完成了Component->Action->Reducer->Store->Component的單向數(shù)據(jù)流動，當(dāng)counter發(fā)生變更的時候，component會根據(jù)counter數(shù)值的變化自動變更。

總結(jié)

同樣一個計數(shù)器應(yīng)用，Angular其實(shí)提供了不同的開發(fā)模式

Angular默認(rèn)的數(shù)據(jù)流和臟值檢查方式其實(shí)適用于絕大部分的開發(fā)場景。

當(dāng)性能遇到瓶頸時（基本不會遇到），可以更改ChangeDetection，保證傳入數(shù)據(jù)Immutable來提升性能。

當(dāng)MVVM不再能滿足程序開發(fā)的要求時，可以嘗試使用Ngrx進(jìn)行函數(shù)式編程。

這篇文章總結(jié)了很多Ngrx優(yōu)缺點(diǎn)，其中我覺得比較Ngrx顯著的優(yōu)點(diǎn)是

數(shù)據(jù)層不僅相對于component獨(dú)立，也相對于框架獨(dú)立，便于移植到其他框架

數(shù)據(jù)單向流動，便于追蹤

Ngrx的缺點(diǎn)也很明顯

實(shí)現(xiàn)同樣功能，代碼量更大，對于簡單程序而言使用Immutable過度設(shè)計，降低開發(fā)效率

FP思維和OOP思維不同，開發(fā)難度更高

參考資料

Immutability vs Encapsulation in Angular Applications

whats-the-difference-between-markforcheck-and-detectchanges

Angular 也走 Redux 風(fēng) (使用 Ngrx)

Building a Redux application with Angular 2

云服務(wù)器 GPU云服務(wù)器 Immutable way way.js mui immutable-js

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/83692.html

發(fā)表評論

登陸后可評論

0條評論

lunaticf

男|高級講師

我要關(guān)注我要私信

TA的文章

集成 nacos注冊中心配置使用

閱讀 3793·2021-11-24 09:39
html+css布局類型

閱讀 2687·2019-08-30 15:54
【二次元的CSS】—— 用 DIV + CSS3 畫大白（詳解步驟）

閱讀 1231·2019-08-30 13:01
扒一下W3C規(guī)范里的BFC和IFC

閱讀 3522·2019-08-28 18:30
element ui table render-header自定義表頭信息使用

閱讀 1690·2019-08-26 17:44
JS中的面向?qū)ο缶幊?/a>

閱讀 3652·2019-08-26 11:31

面向切面編程與裝飾器

閱讀 2498·2019-08-26 10:40
常用的幾個編碼風(fēng)格規(guī)范

閱讀 1352·2019-08-26 10:27

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Immutable & Redux in Angular Way

相關(guān)文章

2017-09-23 前端日報

**(譯 & 轉(zhuǎn)載) 2016 JavaScript 后起之秀**

**關(guān)于前端數(shù)據(jù)&邏輯的思考**

2017-06-23 前端日報

**React-redux進(jìn)階之Immutable.js**

發(fā)表評論

0條評論

lunaticf

男|高級講師

TA的文章

集成 nacos注冊中心配置使用

html+css布局類型

【二次元的CSS】—— 用 DIV + CSS3 畫大白（詳解步驟）

扒一下W3C規(guī)范里的BFC和IFC

element ui table render-header自定義表頭信息使用

JS中的面向?qū)ο缶幊?/a>

面向切面編程與裝飾器

常用的幾個編碼風(fēng)格規(guī)范

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Immutable & Redux in Angular Way

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！