useCallback使用注意

最新推荐文章于 2024-07-06 16:47:02 发布

GMF_CodingBoy

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量115

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_41199852/article/details/131009030

版权

背景

useCallback的作用时基于依赖项缓存函数，但是这个缓存时取值缓存而不是按照地址缓存，这导致了如果缓存的函数使用的值依赖外部某个变量，这个变量只会取第一次用到的值

例子

具体可以看https://codesandbox.io/s/misty-night-vds9oo?file=/demo.js

import "@arco-design/web-react/dist/css/arco.css";
import { useState, useCallback } from "react";
import { useMemoizedFn } from "ahooks";

function Demo(props) {
  const getValue = useCallback(() => {
    return props.test;
  }, []);
  return <div>{getValue()}</div>;
}
function Demo2(props) {
  const getValue = () => {
    return props.test;
  };
  return <div>{getValue()}</div>;
}
function Demo3(props) {
  const getValue = useMemoizedFn(() => {
    return props.test;
  }, []);
  return <div>{getValue?.()}</div>;
}

function App() {
  const [test, setTest] = useState("1");
  return (
    <div>
      无缓存的
      <Demo2 test={test} />
      有缓存但有问题的
      <Demo test={test} />
      有缓存且符合预期
      <Demo3 test={test} />
      <button
        onClick={() => {
          setTest(Math.random());
        }}
      >
        点击更改test值
      </button>
    </div>
  );
}

export default App;