React 实现 useMemo

本文将带大家实现 useMemo。

先看下如何使用。

js 复制代码
function FunctionComponent() {
  const [count1, setCount1] = useState(1);
  const [count2, setCount2] = useState(1);
  
  // 昂贵运算
  const expensive = useMemo(() => {
      let sum = 0;
      for (let i = 0; i < count1; i++) {
          sum += i;
      }
      return sum
  }, [count1])

  return (
    <div className="border">
      <button
        onClick={() => {
          setCount1(count1 + 1);
        }}
      >
        {count1}
      </button>
      <button
        onClick={() => {
          setCount2(count2 + 1);
        }}
      >
        {count2}
      </button>
      <p>{expensive}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  (<FunctionComponent />) as any
);

实现 useMemo

js 复制代码
// 检查 hook 依赖是否变化
export function areHookInputsEqual(
  nextDeps: Array<any>,
  prevDeps: Array<any> | null
): boolean {
  if (prevDeps === null) {
    return false;
  }

  for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
    if (Object.is(nextDeps[i], prevDeps[i])) {
      continue;
    }
    return false;
  }
  return true;
}

export function useMemo<T>(
  nextCreate: () => T,
  deps: Array<any> | void | null
): T {
  // 获取当前 hook
  const hook = updateWorkInProgressHook();

  const nextDeps = deps === undefined ? null : deps;

  const prevState = hook.memoizedState;
  // 检查依赖项是否发生变化
  if (prevState !== null) {
    if (nextDeps !== null) {
      const prevDeps = prevState[1];
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        // 依赖项没有变化,返回上一次计算的结果,就是缓存的值
        return prevState[0];
      }
    }
  }

  const nextValue = nextCreate();

  // mount 阶段存储
  hook.memoizedState = [nextValue, nextDeps];

  return nextValue;
}
相关推荐
2301_7813925214 分钟前
提高前端开发效率的利器:VUE常用组件及应用
前端·javascript·vue.js
golang学习记22 分钟前
VS Code 2025 最强“黑科技”特性:效率直接拉满!
前端
Mintopia27 分钟前
📘 领域适配 AIGC:垂直行业 Web 应用的微调技术实践
前端·aigc·ai编程
llq_35029 分钟前
pnpm 中的硬链接(hard link)和符号链接(symlink)
前端
南屿im30 分钟前
前端性能基准测试入门:用 Benchmark.js 做出数据驱动的选择
前端·javascript
ssshooter33 分钟前
linkProgram 和 useProgram 分别执行了什么动作?
前端·webgl
TZOF34 分钟前
TypeScript的静态类型检查,在js中经常会遇到的困扰
前端·javascript·typescript
_大学牲34 分钟前
Flutter 集成 Google ML Kit 体态识别模型 (二) 如何用姿态数据实现运动动作检测
前端·app
今禾36 分钟前
深入理解CSS媒体查询
前端·css·面试
我的写法有点潮36 分钟前
还在手写动画吗,这3个CSS库该看看了
前端·javascript·css