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;
}
相关推荐
EndingCoder2 小时前
集成 Node.js 模块:文件系统与网络操作
javascript·网络·electron·前端框架·node.js
gnip3 小时前
文件操作利器:showOpenFilePicker
前端·javascript
繁依Fanyi4 小时前
做一个 3D 图片画廊
前端
繁依Fanyi4 小时前
用 Electron 做一个屏幕取色器
前端
某公司摸鱼前端4 小时前
一键 i18n 国际化神库!适配 Vue、React!
前端·vue.js·react.js·i18n
OEC小胖胖4 小时前
给你的应用穿上“外衣”:React中的CSS方案对比与实践
前端·前端框架·react·web
excel4 小时前
Nuxt 3 微前端:模块导入导出与路由跳转实战
前端
大家的林语冰4 小时前
Promise 再次进化,ES2025 新增 Promise.try() 静态方法
前端·javascript·ecmascript 6
大家的林语冰4 小时前
如何错误手写 ES2025 新增的 Promise.try() 静态方法
前端·javascript·ecmascript 6
繁依Fanyi4 小时前
做一个石头剪刀布小游戏
前端