Reactjs 如何在react redux上将debounce添加到useSelector？

useSelector可以监听redux状态更改；如果监听一个大数组，它会多次触发react组件重新启动。如何对其进行优化？

您可以在useSelector中添加debounce：

import { useEffect, useRef, useState } from 'react';
import { useSelector } from 'react-redux';

type EqualFn<T> = (before: T, after: T) => boolean;
export function useDebounceSelector<T extends (...args: any) => any>(
    fn: T,
    equalFn?: EqualFn<ReturnType<T>>,
    time = 300,
): ReturnType<T> {
    const [_, setSate] = useState();
    const refData = useRef<any>();
    const refTimeout = useRef<any>();

    useSelector((state: any) => {
        const now_state = fn(state);
        if (now_state === refData.current) {
            return;
        }
        if (equalFn?.(refData.current, now_state)) {
            return;
        }
        refData.current = now_state;
        clearTimeout(refTimeout.current);
        refTimeout.current = setTimeout(() => {
            setSate(refData.current);
        }, time);

        return;
    });

    useEffect(() => {
        return () => clearTimeout(refTimeout.current);
    }, []);

    return refData.current;
}

从'react'导入{useffect，useRef，useState}；
从'react redux'导入{useSelector}；
类型EqualFn=（在：T之前，在：T之后）=>boolean；
导出功能使用DeBounceSelector any>(
fn:T，
equalFn？：equalFn，
时间=300，
)：返回类型{
const[u，setState]=useState（）；
const refData=useRef（）；
const refTimeout=useRef（）；
使用选择器（（状态：任意）=>{
const now_state=fn（state）；
如果（现在_state===refData.current）{
返回；
}
if（相等？（refData.current，now_state））{
返回；
}
refData.current=当前状态；
clearTimeout（refTimeout.current）；
refTimeout.current=setTimeout（（）=>{
设置状态（refData.current）；
}，时间）；
返回；
});
useffect（（）=>{
return（）=>clearTimeout（refTimeout.current）；
}, []);
返回refData.current；
}