useSelector变量更新触发useEffect延迟过长，如何优化？

核心问题分析 #

你的场景里卡顿的主要原因集中在三个点：

• useSelector的选择器写法导致不必要的组件重渲染
• useEffect内的同步耗时操作阻塞主线程
• 鼠标悬停事件频繁触发导致重复dispatch和计算

具体优化方案 #

1. 修复useSelector的选择逻辑，避免无意义重渲染 #

你当前用useSelector(state => [state.item.inFocus])的写法，每次组件渲染都会创建新数组，哪怕inFocus本身没有变化，useSelector也会判定数据更新，触发组件重渲染和useEffect执行。

改成直接返回目标值，并配合shallowEqual做浅比较：

// Component.js
import { shallowEqual, useSelector } from 'react-redux';

function Component() {
    // 直接返回inFocus，用shallowEqual对比数组引用和元素引用
    const inFocus = useSelector(state => state.item.inFocus, shallowEqual);

    useEffect(() => {
        // 执行逻辑
    }, [inFocus])
}

如果数组元素是深层对象，需要深层比较，可以自定义比较函数或使用lodash.isEqual，但浅比较性能更优，能覆盖大部分场景。

2. 将useEffect内的耗时操作异步化，避免阻塞主线程 #

如果useEffect里的函数需要6000ms才能完成，同步执行会直接卡住主线程，导致页面无响应，可通过以下方式异步处理：

方案A：用setTimeout延迟执行（适合非紧急任务）

useEffect(() => {
    const timer = setTimeout(() => {
        // 放置耗时函数
        executeHeavyTask();
    }, 0);

    // 组件卸载或inFocus更新时清理定时器
    return () => clearTimeout(timer);
}, [inFocus])

setTimeout会把任务放到宏队列，让浏览器先完成渲染，再执行耗时操作。

方案B：用Web Worker处理计算密集型任务（适合大数据量计算）

如果是纯计算任务，可把逻辑放到Web Worker中，完全不占用主线程：

// 在Component中创建Worker
useEffect(() => {
    const worker = new Worker('./heavyTaskWorker.js');
    
    worker.postMessage(inFocus);
    worker.onmessage = (e) => {
        // 处理Worker返回的结果
        const result = e.data;
        // 更新UI或状态
    };

    return () => worker.terminate();
}, [inFocus])

heavyTaskWorker.js中编写计算逻辑：

self.onmessage = (e) => {
    const inFocusData = e.data;
    // 执行耗时计算
    const result = doHeavyCalculation(inFocusData);
    self.postMessage(result);
};

3. 优化Redux的dispatch逻辑，避免重复更新和频繁触发 #

给鼠标悬停事件加防抖处理

鼠标悬停可能频繁触发（比如快速移动鼠标时），给setItemOcrInFocus加防抖，减少调用次数：

import { debounce } from 'lodash'; // 或自行实现防抖函数
import { useCallback } from 'react';

// 用useCallback缓存防抖函数，避免每次渲染重建
const debouncedSetItemOcrInFocus = useCallback(
    debounce(() => {
        if (selections && selections.clicks) {
            const clicks = selections.clicks.filter(
                (c) => c?.selectedItem === item.id || c?.selectedItemIndex === item.index
            );

            if (clicks.length > 0) {
                // 先对比当前state，避免重复dispatch
                const currentInFocus = store.getState().item.inFocus;
                if (!shallowEqual(currentInFocus, clicks)) {
                    dispatch({
                        type: SET_STATE,
                        payload: { inFocus: clicks },
                    });
                }
            } else {
                // 清空inFocus（如果当前不为空）
                const currentInFocus = store.getState().item.inFocus;
                if (currentInFocus.length > 0) {
                    dispatch({
                        type: SET_STATE,
                        payload: { inFocus: [] },
                    });
                }
            }
        }
    }, 100), // 延迟100ms，可按需调整
    [selections, item, dispatch]
);

return (
    <Component onMouseEnter={debouncedSetItemOcrInFocus} />
);

避免重复dispatch

在dispatch前对比当前state的inFocus和即将更新的clicks，只有两者不同时才触发dispatch，减少不必要的Redux更新和组件重渲染。

4. 缓存耗时计算结果 #

如果useEffect里的函数是基于inFocus做重复计算，可把计算结果缓存到Redux或用useMemo缓存：

// 用useMemo缓存计算结果，只有inFocus变化时才重新计算
const cachedResult = useMemo(() => {
    return doHeavyCalculation(inFocus);
}, [inFocus]);

useEffect(() => {
    // 直接使用缓存后的结果，避免重复计算
    useCachedResult(cachedResult);
}, [cachedResult])

内容的提问来源于stack exchange，提问作者Owenn