流数据渲染优化

let content = '';
let buffer = ''
function updateState(chunk) {
    buffer = chunk;
    if('in view'){
        content += buffer;
        buffer = ''
    } else if("out of view") {
        buffer += chunk
    }
    requestAnimationFrame(updateState)
}

for (const chunk of "hello world") {
  updateState(chunk)
}

import { useCallback, useRef, useEffect } from "react";
import { sleep } from "aio-tool";

export enum PromiseState {
    Resume = 'resume',
    Suspense = 'suspense',
    Cancel = 'cancel'
}
export default function useIncreasingRender({
    onContinue,
}: {
    onContinue?: (value: string) => void;
}) {
    // Ref to control the consumer flow
    const promiseRef = useRef<PromiseState | Function>(PromiseState.Cancel);
    // Buffer for accumulating incoming characters
    const remainRef = useRef<string>("");
    // Store the requestAnimationFrame handle so it can be canceled when needed
    const renderLoopRef = useRef<number | null>(null);

    const updater = useCallback(async () => {
        if (promiseRef.current === PromiseState.Resume) {
            onContinue?.(remainRef.current);
            remainRef.current = "";
        } else if (promiseRef.current === PromiseState.Suspense) {
            // Wait for an external signal to resume
            await new Promise((resolve) => {
                promiseRef.current = () => {
                    resolve(true);
                };
            });
        }
        // Schedule next iteration in the next animation frame
        renderLoopRef.current = requestAnimationFrame(updater);
    }, [onContinue]);

    const cancel = useCallback(() => {
        if (renderLoopRef.current !== null) {
            cancelAnimationFrame(renderLoopRef.current);
            renderLoopRef.current = null;
        }
        remainRef.current = "";
        promiseRef.current = PromiseState.Cancel;
    }, []);

    const start = useCallback(() => {
        promiseRef.current = PromiseState.Resume;
        updater().then();
    }, [updater]);

    const consume = useCallback(async (value: string) => {
        if (promiseRef.current === PromiseState.Cancel) return true;
        remainRef.current += value;
        await sleep(0);
    }, []);

    useEffect(() => cancel, [cancel]);

    return {
        start,
        cancel,
        consume,
        promiseRef,
        remainRef,
    };
}