`useCallback` 里面有类似 `useRef.current` 的东西来确保调用总是使用最新版本的回调吗？

Question

我有一种情况，我正在加载多个数据集；用户可以选择加载多少。所有数据集都呈现在同一个图表上。数据集单独和异步加载。

代码类似于

export const DatasetGraph = ({userSelections}) => {
    const [datasets, setDatasets] = useState({});
    // when a selection changes, update the data
    useEffect(() => {
        // while loading a dataset, it is visible but has no data
        setDatasets(userSelections.map(selec => ({ dsname: [] })));
        // trigger asynchronous loads for each new dataset
        userSelections.forEach((dsname) => fetchDataset(dsname));
    }, [userSelections]);

    const fetchDataset = async (dsname) => {
        response = await fetch(url + dsname);
        // QUESTION: after the await, will this call the most recent version of
        // the callback? Will it use the most recent datasets object or an old
        // one saved in the useCallback closure?
        updateDataset(dsname, response);
    };

    // when a fetch returns, update the empty placeholder with the real data
    const updateDataset = useCallback(
        // For this toy example, we could use a setState function to always
        // retrieve the latest `datasets`. However, this callback may use other
        // state which is really what this question is about.
        (dsname, response) => setDatasets({ ...datasets, dsname: response }),
        [datasets]
    );

    return <Graph data={datasets}></Graph>;
};

我还没有尝试让每个数据集成为一个不向 DOM 呈现任何内容的 React 组件，然后它可以管理自己的加载状态。这实际上可能更容易。

Answer 1

`useCallback` 使用 `dependencies` 数组检测变化

useCallback 方法使用您传递给它的 dependencies 数组来记住函数的值。每次都会重新创建您的函数，但不会分配给 updateDataset，除非 dependencies 之一已更改。

你应该小心使用 useCallback 除非你的功能下面的组件重新渲染是昂贵的，否则，useCallback 不会对你的应用程序的性能产生太大的积极影响，即使有任何积极的影响完全没有效果。

它的工作方式与 useMemo 相同，以确保您的数据（在 useCallback 的情况下是一个函数）仅在变量所依赖的内容发生更改时才在您的变量上更新.

`useCallback` 里面有类似 `useRef.current` 的东西来确保调用总是使用最新版本的回调吗？

does `useCallback` have something like a `useRef.current` inside it that will ensure that calls always use the latest version of the callback?

state

reactjs

usecallback

`useCallback` 使用 `dependencies` 数组检测变化

`useCallback` 里面有类似 `useRef.current` 的东西来确保调用总是使用最新版本的回调吗？

does `useCallback` have something like a `useRef.current` inside it that will ensure that calls always use the latest version of the callback?

state

reactjs

usecallback

useCallback 使用 dependencies 数组检测变化

`useCallback` 使用 `dependencies` 数组检测变化