React Hook useCallback?

最新推荐文章于 2025-07-17 11:54:58 发布

前端菜菜

最新推荐文章于 2025-07-17 11:54:58 发布

阅读量574

点赞数

CC 4.0 BY-SA版权

分类专栏： React

原文链接：https://segmentfault.com/a/1190000020108840

React 专栏收录该内容

5 篇文章

订阅专栏

本文讲述了如何在React中避免因useEffect和state更新导致的死循环问题，通过useCallback固定getData引用，并演示了自定义hook useRefCallback来管理依赖。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://segmentfault.com/a/1190000020108840

死循环

01: Child使用useEffect获取数据,对getData有依赖，于是将其加入依赖列表

02: getData执行时，调用setVal，导致App重新渲染

03: App重新渲染时生成新的getData方法，传给Child

function FatherTest() {
  const [val, setVal] = useState("");

  function getData() {
    setTimeout(() => {
      setVal("new data " + count);
      count++;
    }, 500);
  }
  return <Child val={val} getData={getData} />;
}

function Child({ val, getData }) {
  useEffect(() => {
    getData();
  }, [getData]);

  return <div>{val}</div>;
}

解决死循环

function FatherTest() {
  const [val, setVal] = useState("");

  // 01: getData改变的时候，是需要重新获取数据的。这时就需要通过useCallback来将引用固定住
  const getData = useCallback(() => {
    setTimeout(() => {
      setVal("new data " + count);
      count++;
    }, 500);
  }, []);

  return <Child val={val} getData={getData} />;
}

解决死循环:问题 =》如果 useCallback需要依赖val,则再次进入死循环 =》自定义hook

// 自定义hook 
function useRefCallback(fn, dependencies) {
  const ref = useRef(fn);
  // 每次调用的时候，fn 都是一个全新的函数，函数中的变量有自己的作用域
  // 当依赖改变的时候，传入的 fn 中的依赖值也会更新，这时更新 ref 的指向为新传入的 fn
  useEffect(() => {
    ref.current = fn;
  }, [fn, ...dependencies]);

  return useCallback(() => {
    const fn = ref.current;
    return fn();
  }, [ref]);
}

// 调用
  const getData = useRefCallback(() => {
    setTimeout(() => {
      setVal("new data " + count);
      count++;
    }, 500);
  }, [val]);