时间戳

首页 > 解决方案 > 具有依赖关系的 useCallback 与使用 ref 调用函数的最后一个版本

reactjs - 具有依赖关系的 useCallback 与使用 ref 调用函数的最后一个版本

问题描述

在进行代码审查时，我遇到了这个自定义钩子：

import { useRef, useEffect, useCallback } from 'react'

export default function useLastVersion (func) {
  const ref = useRef()
  useEffect(() => {
    ref.current = func
  }, [func])
  return useCallback((...args) => {
    return ref.current(...args)
  }, [])
}

这个钩子是这样使用的：

const f = useLastVersion(() => { // do stuff and depends on props })

基本上，与const f = useCallBack(() => { // do stuff }, [dep1, dep2])此相比，避免声明依赖项列表并且f永远不会更改，即使其中一个依赖项发生更改。

我不知道如何看待这段代码。我不明白使用useLastVersion相比有什么缺点useCallback。

标签： reactjsuse-refusecallback

解决方案

这个问题实际上已经或多或少地在文档中得到了回答：https ://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-sharing-value-from-usecallback

有趣的部分是：

另请注意，此模式可能会导致并发模式出现问题。我们计划在未来提供更符合人体工程学的替代方案，但目前最安全的解决方案是，如果某个值取决于更改，则始终使回调无效。

也很有趣的阅读：https ://github.com/facebook/react/issues/14099和https://github.com/reactjs/rfcs/issues/83

当前的建议是使用提供者来避免在 props 中传递回调，如果我们担心会导致过多的重新渲染。

推荐阅读