基于Chime SDK和React的视频参会者tiles排序与防抖节流咨询

一、符合要求的排序算法 #

核心思路 #

按给定的4级优先级先划分参会者层级，同层级内再按对应规则排序：

1. 层级1：摄像头开启且为活跃发言者 → 按活跃度从高到低（遵循activeSpeakers数组顺序）
2. 层级2：摄像头开启但非活跃发言者 → 按摄像头开启时间排序（遵循attendeeToTileId数组顺序）
3. 层级3：摄像头未开启但为活跃发言者 → 按活跃度从高到低排序
4. 层级4：摄像头未开启且非活跃发言者 → 按用户名或原始顺序排序

代码实现 #

// 优化查找效率：将数组转为Map/Set
const activeSpeakerIndexMap = new Map();
activeSpeakers.forEach((id, index) => activeSpeakerIndexMap.set(id, index));
const cameraOnIds = new Set(attendeeToTileId);

// 排序逻辑
const sortedAttendees = [...attendees].sort((a, b) => {
    // 计算当前用户的优先级层级
    const getPriorityLevel = (user) => {
        const hasCamera = cameraOnIds.has(user.id);
        const isActiveSpeaker = activeSpeakerIndexMap.has(user.id);
        
        if (hasCamera && isActiveSpeaker) return 1;
        if (hasCamera) return 2;
        if (isActiveSpeaker) return 3;
        return 4;
    };

    const levelA = getPriorityLevel(a);
    const levelB = getPriorityLevel(b);

    // 层级不同，层级值小的排前面
    if (levelA !== levelB) {
        return levelA - levelB;
    }

    // 同层级内排序
    switch (levelA) {
        case 1:
        case 3:
            // 按活跃发言者的优先级排序（索引越小，活跃度越高）
            return activeSpeakerIndexMap.get(a.id) - activeSpeakerIndexMap.get(b.id);
        case 2:
            // 按摄像头开启时间排序（数组索引越小，开启时间越早）
            return attendeeToTileId.indexOf(a.id) - attendeeToTileId.indexOf(b.id);
        case 4:
            // 默认按用户名排序，可替换为原始顺序或其他规则
            return a.name.localeCompare(b.name);
        default:
            return 0;
    }
});

优化说明 #

• 使用Map存储活跃发言者索引，将查找时间从O(n)降为O(1)
• 使用Set存储摄像头开启用户ID，快速判断摄像头状态
• 通过扩展运算符创建新数组排序，避免修改原数据

二、React中适用的节流/防抖策略 #

失效原因分析 #

之前防抖/节流失效，通常是因为组件每次render都会重新创建防抖函数，导致每次调用都是独立实例，无法累积触发次数。核心解决方法是用useRef保存防抖函数引用，确保组件生命周期内使用同一个函数实例。

防抖实现（Lodash版） #

import { debounce } from 'lodash';
import { useState, useEffect, useRef } from 'react';

function VideoChatComponent() {
    const [attendees, setAttendees] = useState([]);
    const [activeSpeakers, setActiveSpeakers] = useState([]);
    const [attendeeToTileId, setAttendeeToTileId] = useState([]);
    const [sortedAttendees, setSortedAttendees] = useState([]);

    // 用useRef保存防抖函数引用
    const sortedAttendeesRef = useRef();

    useEffect(() => {
        // 定义排序逻辑函数
        const sortAttendees = () => {
            const activeSpeakerIndexMap = new Map();
            activeSpeakers.forEach((id, index) => activeSpeakerIndexMap.set(id, index));
            const cameraOnIds = new Set(attendeeToTileId);

            const sorted = [...attendees].sort((a, b) => {
                const getPriorityLevel = (user) => {
                    const hasCamera = cameraOnIds.has(user.id);
                    const isActiveSpeaker = activeSpeakerIndexMap.has(user.id);
                    if (hasCamera && isActiveSpeaker) return 1;
                    if (hasCamera) return 2;
                    if (isActiveSpeaker) return 3;
                    return 4;
                };

                const levelA = getPriorityLevel(a);
                const levelB = getPriorityLevel(b);
                if (levelA !== levelB) return levelA - levelB;

                switch (levelA) {
                    case 1:
                    case 3:
                        return activeSpeakerIndexMap.get(a.id) - activeSpeakerIndexMap.get(b.id);
                    case 2:
                        return attendeeToTileId.indexOf(a.id) - attendeeToTileId.indexOf(b.id);
                    case 4:
                        return a.name.localeCompare(b.name);
                    default:
                        return 0;
                }
            });

            setSortedAttendees(sorted);
        };

        // 初始化防抖函数（延迟300ms，可按需调整）
        sortedAttendeesRef.current = debounce(sortAttendees, 300);

        // 触发排序，依赖变化时取消之前的pending调用
        sortedAttendeesRef.current.cancel();
        sortedAttendeesRef.current();

        // 组件卸载时清理防抖调用
        return () => {
            sortedAttendeesRef.current.cancel();
        };
    }, [attendees, activeSpeakers, attendeeToTileId]);

    // 渲染逻辑...
}

节流实现（Lodash版） #

若需定期执行排序（比如每500ms执行一次），只需将debounce替换为throttle：

sortedAttendeesRef.current = throttle(sortAttendees, 500);

自定义防抖（无Lodash） #

不想依赖Lodash时，可自定义防抖函数结合useRef：

const useDebounce = (func, delay) => {
    const timeoutRef = useRef();

    return (...args) => {
        clearTimeout(timeoutRef.current);
        timeoutRef.current = setTimeout(() => func(...args), delay);
    };
};

// 组件内使用
const debouncedSort = useDebounce(sortAttendees, 300);

内容的提问来源于stack exchange，提问作者Admir Husić