angular视图缓存-keep-alive-五八三

上一期我们已经聊了组件缓存相关内容, 那么这一期基于上一期的内容封装类似vue中keep-alive功能的组件，本文中先看具体使用，然后再一步一步实现keep-alive组件。

基本使用

vue&angular都支持模板式动态组件而且表现行为都很相似

<component :is="activeComponent" />

angular

<ng-template *ngComponentOutlet="someComponent"></ng-template>

默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。

在下面的例子中，你会看到两个有状态的组件——A 有一个计数器，而 B 有一个通过 双向数据绑定 同步 input 框输入内容的文字展示。尝试先更改一下任意一个组件的状态，然后切走，再切回来：

你会发现在切回来之后，之前已更改的状态都被重置了。

在切换时创建新的组件实例通常是有意义的，但在这个例子中，我们的确想要组件能在被“切走”的时候保留它们的状态。要解决这个问题，我们需要缓存组件在vue有内置的<KeepAlive>可以直接拿来使用

在vue中看起来是这样的:

<!-- 非活跃的组件将会被缓存！ -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

在基于本章封装的angular keep-alive组件使用起来是这样的

@Component({



  selector: 'app-root',

  styleUrls: ['./app.component.scss'],

  template: `

    <app-keep-alive [is]="component"></app-keep-alive>


    <button (click)="active(0)">激活组件1</button>

    <button (click)="active(1)">激活组件2</button>

    <button (click)="active(2)">激活组件3</button>

  `

})

export class AppComponent {

  component: Type<any> = DyComponent1Component;




  active(index: number) {

    const component = [DyComponent1Component, DyComponent2Component, DyComponent3Component]




    this.component = component[index];

  }

}

包括/排除

跟vue中<KeepAlive>一样，默认会缓存内部的所有组件实例，在vue中可以通过 include 和 exclude prop 来定制该行为。这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组：

<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>


<!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>


<!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

我封装的keep-alive组件放弃了这种方式来达到包括/排除的效果，采用了通过接口的形式由动态组件自身控制，同时支持动态控制缓存行为

@Component({



  selector: 'app-dy-component1',

  standalone: true,

  imports: [CommonModule],

  template: `

    <span>

      count: {{count}}

    </span>

    <button (click)="addCount()">+</button>

    <p></p>

  `,

})


export class DyComponent1Component implements WithKeepAlive {

  count = 0;

  // 实现WithKeepAlive接口 默认为true，可以动态改变

  keepAlive = true;



  addCount() {
    this.count ++;
  }

  constructor() {
    console.log('DyComponent1Component');
  }
}

也可以使用get来实现更复杂的条件验证

@Component({



  selector: 'app-dy-component1',

  standalone: true,

  imports: [CommonModule],

  template: `

    <span>

      count: {{count}}

    </span>

    <button (click)="addCount()">+</button>

    <p></p>

  `,

})


export class DyComponent1Component implements WithKeepAlive {

  count = 0;

  // 实现WithKeepAlive接口 默认为true，可以动态改变

  get keepAlive() {
      return // 条件1 && 条件2...
  }

  addCount() {
    this.count ++;
  }


  constructor() {
    console.log('DyComponent1Component');
  }
}

最大缓存实例数

在vue中可以通过传入 max prop 来限制可被缓存的最大组件实例数。<KeepAlive> 的行为在指定了 max 后类似一个 LRU 缓存，如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。

<KeepAlive :max="10">
  <component :is="activeComponent" />
</KeepAlive>

我封装后的max效果跟vue保持一致

@Component({



  selector: 'app-root',

  styleUrls: ['./app.component.scss'],

  template: `

    <app-keep-alive [max]=2 [is]="component"></app-keep-alive>


    <button (click)="active(0)">激活组件1</button>

    <button (click)="active(1)">激活组件2</button>

    <button (click)="active(2)">激活组件3</button>

  `

})

export class AppComponent {

  component: Type<any> = DyComponent1Component;




  active(index: number) {

    const component = [DyComponent1Component, DyComponent2Component, DyComponent3Component]




    this.component = component[index];

  }

}

缓存实例的生命周期

在vue中当一个组件实例从 DOM 上移除但因为被 <KeepAlive> 缓存而仍作为组件树的一部分时，它将变为不活跃状态而不是被卸载。当一个组件实例作为缓存树的一部分插入到 DOM 中时，它将重新被激活。

一个持续存在的组件可以通过 onActivated() 和 onDeactivated() 注册相应的两个状态的生命周期钩子：

<script setup>
import { onActivated, onDeactivated } from 'vue'

，`onActivated`调用时机与vue是一致的，(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
})

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及 组件卸载时调用
})


</script>

我封装后的调用时机跟vue中有所区别：onActivated调用时机与vue是一致的，onDeactivated与vue的区别是组件卸载时不会调用，这个跟angular自身的特效有关没必要调用。

实现篇

组件很少，只需要实现一个组件keep-alive

keep-alive

export interface OnActivated {
  onActivated(): void;
}
export interface OnDeactivated {
  onDeactivated(): void;
}
export interface WithKeepAlive {
  keepAlive: boolean;
}


export interface DyComponent extends OnActivated, OnDeactivated, WithKeepAlive {
  [key: string]: any;
}



export type TypedSimpleChanges<T> = {
  [P in keyof T]?: SimpleChange;
};

interface DyView {
  component: Type<DyComponent>;
  componentRef: ComponentRef<DyComponent>;
}


/**
 * 执行缓存实例生命周期
 * @param componentRef
 */
function executeOnActivated(componentRef: ComponentRef<DyComponent>) {
  componentRef.instance.onActivated && componentRef.instance.onActivated();
}
/**
 * 执行缓存实例生命周期
 * @param componentRef
 */
function executeOnDeactivated(componentRef: ComponentRef<DyComponent>) {
  componentRef.instance.onDeactivated && componentRef.instance.onDeactivated();
}

@Component({
  selector: 'app-keep-alive',
  template: `
    <ng-container #container></ng-container>
  `,
  styles: [
  ]
})
export class KeepAliveComponent implements OnInit, OnDestroy, OnChanges {
  // 组件类
  @Input() is!: Type<any>
  // 控制缓存实例个数上限 默认不限制
  @Input() max: number = Infinity;
  // 用于去除自定义标签app-keep-alive
  @ViewChild('container', { read: ElementRef, static: true }) container!: ElementRef;

  #cacheView: DyView[] = [];

  #currentViewRef?: ComponentRef<DyComponent>;

  constructor(private elementRef: ElementRef,
              private readonly viewContainerRef: ViewContainerRef,
              private readonly injector: Injector,) {}

  ngOnInit() {
    // 替换自定义标签
    this.elementRef.nativeElement.replaceWith(this.container.nativeElement);
  }

  ngOnChanges(changes: TypedSimpleChanges<KeepAliveComponent>) {
    if (changes.is) {
      this.isChange(changes.is?.previousValue, changes.is?.currentValue);
    }
  }

  private activate(currentValue: Type<any>) {
    if (this.#currentViewRef) {
      // 卸载视图 执行缓存实例生命周期
      executeOnDeactivated(this.#currentViewRef);
      this.viewContainerRef.detach();
    }

    // 从缓存中获取view
    const view = this.#cacheView.find(value => value.component === currentValue);

    if (view) {
      // 已经渲染过了
      const keepAlive = view.componentRef.instance.keepAlive ?? true;

      if (!keepAlive) {
        // 如果不需要缓存 直接将之前缓存了的去除掉即可
        this.#cacheView = this.#cacheView.filter(value => value.component !== currentValue)
      } else {
        // 执行缓存实例生命周期
        executeOnActivated(view.componentRef);
        // 将缓存的视图重新插入到DOM树中
        this.viewContainerRef.insert(view.componentRef.hostView);
        return
      }
    }
    // 初次渲染
    const injector = Injector.create({
      providers: [],
      parent: this.injector
    });

    this.#currentViewRef = this.viewContainerRef.createComponent(currentValue, {
      injector,
      index: this.viewContainerRef.length
    });

    const keepAlive = this.#currentViewRef.instance.keepAlive ?? true;

    if (!keepAlive) {
      // 无需缓存!
      return;
    }

    // 执行缓存实例生命周期
    executeOnActivated(this.#currentViewRef);

    Promise.resolve().then(() => {
      const max = this.max;

      if (this.#cacheView.length >= max) {
        this.#cacheView.shift();
      }

      this.#cacheView.push(<DyView>{
        component: currentValue,
        componentRef: this.#currentViewRef
      })
    })


  }

  isChange(previousValue: Type<any>, currentValue: Type<any>) {
    this.activate(currentValue);
  }

  ngOnDestroy() {
    this.elementRef.nativeElement?.remove();
  }
}

总结

所有源码 github.com/chengdongha…

在开发中keep-alive的场景还是比较常见的，在angular中可能会使用路由缓存来实现类似的需求，但对于更细粒度的缓存，路由缓存就不是很合适的了，有时候为了实现类似需求，可能会使用css样式来实现，这种方式会带来一些性能损耗，所以还是需要封装keep-alive这样的组件，实现得比较粗糙，如果觉得一些必要而又没有实现的功能欢迎评论留言，我会更新到github

文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。

THE END