当前位置：首页 > React

react闭包实现缓存

2026-01-27 12:40:44React

使用闭包实现缓存的原理

在React中利用闭包特性可以实现缓存功能，核心思想是通过函数作用域保留变量状态。闭包能让函数访问其定义时的词法环境，即使函数在其他地方执行。

react闭包实现缓存

基础闭包缓存实现

function createCache() {
  const cache = {};

  return function(key, value) {
    if (value !== undefined) {
      cache[key] = value; // 设置缓存
    }
    return cache[key]; // 获取缓存
  };
}

const cache = createCache();
cache('name', 'Alice'); // 设置
console.log(cache('name')); // 获取

React组件中的缓存优化

在函数组件中使用useMemo和useCallback结合闭包：

react闭包实现缓存

import React, { useMemo, useCallback } from 'react';

function ExpensiveComponent({ data }) {
  const memoizedData = useMemo(() => {
    const cache = {};
    return (key) => {
      if (!cache[key]) {
        console.log('计算新值');
        cache[key] = expensiveCalculation(data, key);
      }
      return cache[key];
    };
  }, [data]);

  return <div>{memoizedData('someKey')}</div>;
}

自定义Hook实现

创建可复用的缓存Hook：

function useCache() {
  const cacheRef = React.useRef(new Map());

  const getCache = useCallback((key) => {
    return cacheRef.current.get(key);
  }, []);

  const setCache = useCallback((key, value) => {
    cacheRef.current.set(key, value);
  }, []);

  return { getCache, setCache };
}

// 使用示例
function MyComponent() {
  const { getCache, setCache } = useCache();
  // ...
}

带过期时间的缓存

扩展基础缓存实现自动清理：

function createTimedCache(ttl) {
  const cache = {};

  return function(key, value) {
    const now = Date.now();
    if (value !== undefined) {
      cache[key] = { value, expires: now + ttl };
    }

    const entry = cache[key];
    if (entry && entry.expires > now) {
      return entry.value;
    }
    delete cache[key];
    return undefined;
  };
}