在計算機編程領域中，memoization 或 memoisation 是一種優化技術，主要用于通過存儲昂貴的函數調用的結果并在再次出現相同的輸入時返回緩存的結果來加速計算機程序。

Memoization 也已用于其他上下文（以及速度增益以外的目的），例如在簡單的相互遞歸下降解析中。盡管與緩存有關，但記憶化是指此優化的特定情況，將其與緩存或頁面替換等緩存形式區分開來。在某些邏輯編程語言的上下文中，記憶化也稱為 Tabling.

記憶功能“記住”與某些特定輸入集相對應的結果。使用記住輸入的后續調用返回記住的結果而不是重新計算它，從而消除了使用給定參數調用的主要成本，除了第一次使用這些參數調用函數。記住的關聯集可以是由替換算法控制的固定大小的集，也可以是固定集，這取決于函數的性質及其用途。一個函數只有在引用透明的情況下才能被記憶；也就是說，僅當調用該函數與用其返回值替換該函數調用具有完全相同的效果時。 （然而，存在此限制的特殊情況例外。）雖然與查找表相關，但由于記憶在其實現中經常使用此類表，因此記憶會根據需要即時而不是提前填充其結果緩存。

記憶化是一種以犧牲空間成本的方法來降低函數時間成本的優化方式；也就是說，記憶化的函數會針對速度進行優化，付出的代價是對計算機內存空間的更高使用率。算法的時間/空間“成本”在計算中有一個特定的名稱：計算復雜度。所有函數在時間（即它們需要時間來執行）和空間上都具有計算復雜性。

什么是 NgRx selector

選擇器是用于獲取存儲狀態切片( store state slices)的純函數。@ngrx/store 提供了一些幫助函數來優化這個選擇。

Selector 也符合單一職責及 Single responsibility，一個 selector 只 touch State 的一個片段。

使用 createSelector 和 createFeatureSelector 函數時，@ngrx/store 會跟蹤調用選擇器函數的最新參數。 因為選擇器是純函數，當參數匹配時可以返回最后一個結果，而無需重新調用選擇器函數。這可以提供性能優勢，特別是對于執行昂貴計算的選擇器。這種做法被稱為記憶。

換言之，我們雖然實現了 Selector，但是運行時，這些 selector 可能只會被執行一次，因為如果輸入參數相同，NgRx 框架會使用緩存的結果直接返回給調用者，而不會重復調用我們的 Selector.

例子：Using a selector for one piece of state

import { createSelector } from '@ngrx/store';export interface FeatureState {counter: number; }export interface AppState {feature: FeatureState; }export const selectFeature = (state: AppState) => state.feature;export const selectFeatureCount = createSelector(selectFeature,(state: FeatureState) => state.counter );console.log('ok');

例子：Using selectors for multiple pieces of state

createSelector 可用于基于相同狀態(State)的多個切片從狀態中選擇一些數據。

createSelector 函數最多可以使用 8 個選擇器函數，用于更完整的狀態選擇。

例如，假設您在狀態中有一個 selectedUser 對象。 您還有一個 allBooks 書籍對象數組。

并且您想顯示當前用戶的所有書籍。

您可以使用 createSelector 來實現這一點。即使您在 allBooks 中更新它們，您的可見書籍也將始終是最新的。 如果選擇了一個，它們將始終顯示屬于您的用戶的書籍，如果沒有選擇用戶，它們將顯示所有書籍。

CreateSelector 里傳入純函數。

import { createSelector } from '@ngrx/store';export interface User {id: number;name: string; }export interface Book {id: number;userId: number;name: string; }export interface AppState {selectedUser: User;allBooks: Book[]; }export const selectUser = (state: AppState) => state.selectedUser; export const selectAllBooks = (state: AppState) => state.allBooks;export const selectVisibleBooks = createSelector(selectUser,selectAllBooks,(selectedUser: User, allBooks: Book[]) => {if (selectedUser && allBooks) {return allBooks.filter((book: Book) => book.userId === selectedUser.id);} else {return allBooks;}} );

Selecting Feature States

createFeatureSelector 是返回頂級功能狀態(Top Level Feature State)的便捷方法。它為狀態的特征切片返回一個類型化的選擇器函數。

import { createSelector, createFeatureSelector } from '@ngrx/store';export const featureKey = 'feature';export interface FeatureState {counter: number; }export interface AppState {feature: FeatureState; }export const selectFeature = createFeatureSelector<AppState, FeatureState>(featureKey);export const selectFeatureCount = createSelector(selectFeature,(state: FeatureState) => state.counter );

Resetting Memoized Selectors

通過調用 createSelector 或 createFeatureSelector 返回的選擇器函數最初的記憶值為 null。 在第一次調用選擇器后，其記憶值存儲在內存中。 如果隨后使用相同的參數調用選擇器，它將返回記憶值。 如果隨后使用不同的參數調用選擇器，它將重新計算并更新其記憶值。

一個例子：

import { createSelector } from '@ngrx/store';export interface State {counter1: number;counter2: number; }export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector(selectCounter1,selectCounter2,(counter1, counter2) => counter1 + counter2 ); // selectTotal has a memoized value of null, because it has not yet been invoked.let state = { counter1: 3, counter2: 4 };selectTotal(state); // computes the sum of 3 & 4, returning 7. selectTotal now has a memoized value of 7 selectTotal(state); // does not compute the sum of 3 & 4. selectTotal instead returns the memoized value of 7state = { ...state, counter2: 5 };selectTotal(state); // computes the sum of 3 & 5, returning 8. selectTotal now has a memoized value of 8

選擇器的記憶值無限期地保留在內存中。 例如，如果記憶值是不再需要的大數據集，則可以將記憶值重置為 null，以便可以從內存中刪除大數據集。 這可以通過調用選擇器上的 release 方法來完成。

selectTotal(state); // returns the memoized value of 8 selectTotal.release(); // memoized value of selectTotal is now null

總結

以上是生活随笔為你收集整理的NgRx Selector 的 Memoization 特性学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。