函数实例可以保留在React函数组件中吗？

Question

我正在尝试在功能性React组件中首次使用功能包装器。我需要函数保持不变，但似乎每次重新渲染都将其恢复。 fetchWithAbort仅在启动另一个请求之前中止所有先前的请求。我知道useRef是原始元素，但是如何使用函数呢？

包装功能

const fetchWithAbort = () => {
    let currentAbort = new AbortController();

    return (...args) => {

        currentAbort.abort();
        currentAbort = new AbortController();
        let signal = currentAbort.signal;

        try {
            return fetch(args, {"signal": signal});

        } catch (err) {
            if (err.name === "AbortError") {
                return;
            } else {
                throw err;
            }
        }
    };
};

示例组件

const ExampleLayout = (props) => { 
    const pageFetch = fetchWithAbort();
    const handleNextPage = async (e) => {
        ...
        const resp = await pageFetch(url);
        ...
    };

    return (
        <div>
            <div id="next-page" onClick={handleNextPage}>Next</div>
        </div>
    );
};

Answer 1

您可以将函数放入ref内，就像原始函数一样。引用实际上只是具有当前字段的对象，可以指向任何对象。

const ExampleLayout = (props) => { 
    const pageFetch = useRef(fetchWithAbort());
    const handleNextPage = async (e) => {
        ...
        const resp = await pageFetch.current(url);
        ...
    };

    return (
        <div>
            <div id="next-page" onClick={handleNextPage}>Next</div>
        </div>
    );
};