面试题：Qwik动态路由数据按需加载时的缓存策略优化

1. 利用Qwik的信号（Signals）特性

Qwik的信号是一种响应式状态管理机制。可以创建一个全局的缓存对象，使用信号来管理缓存状态。

import { component$, useSignal } from '@builder.io/qwik';

// 创建缓存对象
const dataCache = useSignal<Record<string, any>>({});

export const MyComponent = component$(() => {
  // 这里假设动态路由的参数作为缓存键
  const routeParam = 'your - dynamic - route - param'; 
  let data = dataCache.value[routeParam];

  if (!data) {
    // 模拟数据请求
    data = fetchData(routeParam); 
    dataCache.value[routeParam] = data;
  }

  return <div>{/* 使用数据渲染 */}</div>;
});

2. 缓存过期机制

为了保证数据的有效性，可以为缓存数据设置过期时间。

import { component$, useSignal } from '@builder.io/qwik';

const dataCache = useSignal<Record<string, any>>({});
const cacheExpiry = useSignal<Record<string, number>>({});

export const MyComponent = component$(() => {
  const routeParam = 'your - dynamic - route - param'; 
  let data = dataCache.value[routeParam];
  const currentTime = Date.now();

  if (!data || (cacheExpiry.value[routeParam] && cacheExpiry.value[routeParam] < currentTime)) {
    data = fetchData(routeParam); 
    dataCache.value[routeParam] = data;
    cacheExpiry.value[routeParam] = currentTime + 60 * 1000; // 设置1分钟过期
  }

  return <div>{/* 使用数据渲染 */}</div>;
});

3. 数据一致性

当数据发生变化时，需要更新缓存。可以通过在数据更新的地方（例如API响应更新数据时），同步更新缓存。

async function updateData(newData: any, routeParam: string) {
  // 假设这里是更新数据的API调用
  await apiCallToUpdateData(newData); 
  dataCache.value[routeParam] = newData;
  cacheExpiry.value[routeParam] = Date.now() + 60 * 1000; // 重置过期时间
}

4. 缓存清理

为了避免缓存无限增长，可以定期清理缓存。可以使用setInterval结合Qwik的onMount和onUnmount生命周期函数来实现。

import { component$, onMount, onUnmount } from '@builder.io/qwik';

const dataCache = useSignal<Record<string, any>>({});
const cacheExpiry = useSignal<Record<string, number>>({});

export const MyComponent = component$(() => {
  let cacheCleanInterval: ReturnType<typeof setInterval>;

  onMount(() => {
    cacheCleanInterval = setInterval(() => {
      const currentTime = Date.now();
      const keys = Object.keys(cacheExpiry.value);
      keys.forEach(key => {
        if (cacheExpiry.value[key] && cacheExpiry.value[key] < currentTime) {
          delete dataCache.value[key];
          delete cacheExpiry.value[key];
        }
      });
    }, 5 * 60 * 1000); // 每5分钟清理一次
  });

  onUnmount(() => {
    clearInterval(cacheCleanInterval);
  });

  return <div>{/* 组件内容 */}</div>;
});

5. 结合Qwik City的路由事件

Qwik City提供了路由相关的事件，可以在路由变化时检查缓存，决定是否重新请求数据。

import { component$, useLocation } from '@builder.io/qwik - city';

const dataCache = useSignal<Record<string, any>>({});
const cacheExpiry = useSignal<Record<string, number>>({});

export const MyComponent = component$(() => {
  const location = useLocation();
  const routeParam = getRouteParamFromLocation(location); 

  let data = dataCache.value[routeParam];
  const currentTime = Date.now();

  if (!data || (cacheExpiry.value[routeParam] && cacheExpiry.value[routeParam] < currentTime)) {
    data = fetchData(routeParam); 
    dataCache.value[routeParam] = data;
    cacheExpiry.value[routeParam] = currentTime + 60 * 1000;
  }

  return <div>{/* 使用数据渲染 */}</div>;
});

其中fetchData函数是模拟从API获取数据的异步操作，apiCallToUpdateData是模拟更新数据到API的操作，getRouteParamFromLocation是从路由位置获取参数的自定义函数。

星途面试题库