共计 983 个字符,预计需要花费 3 分钟才能阅读完成。
源代码:
import {Component} from '@angular/core';
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.
createSelector 外部:
function createSelector(...input) {return createSelectorFactory(defaultMemoize)(...input);
}
defaultMemoize 返回一个对象,每个字段指向一个函数:
输出参数我传入了三个纯函数,即没有 side effect,能够反复执行的函数。这三个纯函数被保护到了一个数组内:
进入到 createSelectorFactory 返回的函数体外部:
从源代码能够看出,createSelector 接管的可变数目标参数,最初一个被当成 projector 对待,其余均视作 selector.
分下列几种状况探讨:
(1) 第一次执行,lastArguments undefined, 进入该 IF 分支,执行 projection,将后果保留,并返回。
(2) 如果是反复执行,且输出参数没有变动,则间接返回上一次执行的后果
(3) 执行到这里,阐明是反复执行,且参数产生了变动,则从新执行 projection
(4) 如果再次执行和前次执行的后果雷同,返回前次后果
createSelector 最终返回的,是带有记忆性能的 selector:
当前如若要调试,记住代码的大略地位在 970,搜寻关键字 memoized.
更多 Jerry 的原创文章,尽在:” 汪子熙 ”:
正文完