函数实例可以持久化在 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 中，就像基元一样。 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>
    );
};