测试源代码:import{Component}from'@angular/core';import{createSelector}from'@ngrx/store';导出接口状态{counter1:number;counter2:数字;}exportconstselectCounter1=(state:State)=>state.counter1;exportconstselectCounter2=(state:State)=>state.counter2;exportconstselectTotal=createSelector(selectCounter1,selectCounter2,(counter1,counter2)=>柜台1+柜台2);//selectTotal的记忆值为null,因为它尚未被调用。让state={counter1:3,counter2:4};@Component({selector:'selector',template:''})exportclassSelectorComponent{constructor(){console.log(selectTotal(state));//计算3和4的总和,返回7。selectTotal现在有一个记忆值7console.log(selectTotal(state));//不计算3和4的总和。selectTotal而是返回记忆值7}}首先执行构造函数中的第一个选择器调用selectTotal。函数体是createSelector返回的memoized函数:因为是第一次调用,lastArguments是undefined,所以执行projectionFn:不会马上调用我们在projection中定义的加法运算:传入createSelector时指定的projectionFn函数我们的应用程序在这里没有看到。selectors是一个数组,存放的是应用开发者传入的纯函数:调用数组自带的map方法,首先计算投影计算需要的输入参数:这里的fn是selectors数组的第一个元素:get3:以此类推,第二个参数4:3、4是最终调用带记忆函数的projectionFn的入参:这就是我们已经熟悉的memoized函数体。可以参考Jerry之前的文章:NgRxStorecreateSelector单步调试及源码分析。projector是之前createSelector传入的纯函数中的最后一个,即执行加法运算的函数:执行求和运算:缓存调用的输入参数3和4。计算结果7也被缓存了:第二次执行时,因为入参没有变化,还是3和4,所以直接从缓存的结果中取出7返回。更多Jerry原创文章在这里:《王子熙》:
