React：数据相同时用户列表项出现闪烁的问题解决咨询

问题 #

我在组件中允许用户搜索其他用户，使用query状态变量跟踪搜索内容。每当query变化时，经过一段延迟后执行查询，并在页面上渲染新的用户列表。相关代码如下：

const [query, setQuery] = useState("")
const [users, setUsers] = useState([])
const [isLoading, setIsLoading] = useState(false)
const [noResultsFound, setNoResultsFound] = useState(false)


useEffect(() => {
    if (query === "" || !query) return

    let timer = setTimeout(async () => {
        setIsLoading(true)
        const res = await axiosPrivate.get(`${BASE_URL}/api/users/get_users/${query}`, { headers: { "x-auth-token": token } })
        if (res?.data?.length === 0) {
            setUsers([])
            setNoResultsFound(true)
        } else {
            setUsers(res.data)
            setNoResultsFound(false)
            console.log(users)
        }

        setIsLoading(false)
    }, 500)

    return () => {
        clearTimeout(timer)
    }
}, [query])

之后在页面上渲染用户数组（如果存在），否则显示加载指示器。如果查询无结果，则显示对应的提示文本：

{isLoading && (
    <Spinner
        noDelay={true}
        withStyles={false}
    />
)}

{!isLoading && noResultsFound === false && users.length > 0 && (
    <>
        {users.map((user) => (
            <p key={uuidv4()}>{ user.username}</p>
        ))}
    </>
)}

{!isLoading && noResultsFound === true && users.length === 0 && <p>No users</p>}

遇到的问题：当query变化，但API返回完全相同的结果时，每个用户列表项都会出现闪烁。已确保映射项的key都是唯一的。如何确保当API返回完全相同的结果时，不重新渲染列表项以避免页面闪烁？如果此方案不可行，还有哪些方法可以避免这种闪烁？

解决方案 #

1. 对比新旧数据，仅在变化时更新状态 #

在设置users状态前，先对比新返回的res.data和当前users是否完全一致。如果数据无变化，就不执行setUsers，避免触发不必要的组件重渲染。

可以用深对比函数（比如lodash的isEqual，或自定义深对比逻辑）来判断数据是否相同：

import isEqual from 'lodash/isEqual';

// 在useEffect的else块中修改逻辑：
else {
    // 仅当新旧数据不同时，才更新状态
    if (!isEqual(res.data, users)) {
        setUsers(res.data);
        setNoResultsFound(false);
    }
    setIsLoading(false);
}

注意：如果用户对象结构复杂，不建议用JSON.stringify做对比——它会受属性顺序影响，容易出现误判。

2. 替换不稳定的key，使用用户自带的唯一标识 #

你当前用uuidv4()作为列表项的key，每次重渲染都会生成新的UUID，React会认为所有列表项都是全新元素，进而销毁旧DOM、重建新DOM，这是闪烁的核心原因之一。

应该改用用户数据中自带的稳定唯一标识，比如user.id：

{users.map((user) => (
    <p key={user.id}>{ user.username}</p>
))}

稳定的key能让React复用已存在的DOM元素，避免不必要的销毁和重建。

3. 优化加载状态的触发逻辑 #

当前只要发起查询就会显示加载状态，哪怕新结果和旧结果一致。可以调整逻辑：

• 新增查询缓存，在发起请求前先判断当前query的结果是否和现有数据一致，一致则直接跳过请求和加载状态更新；
• 或者通过CSS给加载指示器和列表项添加平滑过渡效果，减少视觉上的闪烁感（比如用opacity或transform做渐变）。

示例缓存逻辑：

// 组件内新增缓存Map
const queryCache = useRef(new Map());

// 在useEffect的定时器内修改：
let timer = setTimeout(async () => {
    const cachedResult = queryCache.current.get(query);
    // 如果缓存存在且和当前users一致，直接结束
    if (cachedResult && isEqual(cachedResult, users)) {
        setIsLoading(false);
        return;
    }

    setIsLoading(true);
    const res = await axiosPrivate.get(`${BASE_URL}/api/users/get_users/${query}`, { headers: { "x-auth-token": token } });
    
    // 请求完成后更新缓存
    queryCache.current.set(query, res.data);
    
    // 后续状态更新逻辑...
}, 500)

4. 优化防抖逻辑 #

在防抖期间，如果query变回之前的内容，可以直接复用缓存的结果，避免重复发起相同请求，进一步减少不必要的状态更新和渲染。

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