zoukankan      html  css  js  c++  java
  • [Angular] Using Pipe for function memoization

    Sometimes we might have some expensive function to calcuate state directly from template:

    <div class="chip">
         {{ calculate (item.num)}}
    </div>
     calculate(num: number) {
       return fibonacci(num);
     }

    The ´calculate´ function is a pure function, we can use memoization to imporve the profermance. Angualr pure Pipe is good match for that:

    // calculate.pipe.ts
    
    import { Pipe, PipeTransform } from '@angular/core';
    
    const fibonacci = (num: number): number => {
      if (num === 1 || num === 2) {
        return 1;
      }
      return fibonacci(num - 1) + fibonacci(num - 2);
    };
    
    @Pipe({
      name: 'calculate'
    })
    export class CalculatePipe implements PipeTransform {
      transform(num: number): any {
        return fibonacci(num);
      }
    }
    <div class="chip">
       {{ item.num | calculate }}
    </div>

    If we call 'calcualate' with the same params, it will return the cached value.

  • 相关阅读:
    吉他 摄影
    前端思考独处时间自我成长
    约束力
    js算法
    旅行计划
    生产者消费者问题
    Lock锁
    线程和进程
    什么是JUC
    GC日志分析和垃圾回收器的新展望
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11446963.html
Copyright © 2011-2022 走看看