React中数组：替换整体还是仅更新变更项？

你当前的需求是每分钟调用API更新用户列表，数组最多包含100个元素，核心疑问是直接替换整个数组还是仅更新变更项，尤其是last_online字段。下面直接分析两种方案的优劣和适用场景：

一、直接全量替换 #

优点 #

• 代码极简：直接setUsers(users)即可，不需要额外的对比、匹配逻辑，维护成本极低
• 可靠性高：完全基于API返回的最新完整数据，不用担心新旧数据匹配错误（比如字段遗漏、标识重复等问题）
• 性能无压力：100个元素的规模下，React的重新渲染开销微乎其微，用户完全感知不到延迟

缺点 #

• 即使数据完全没变化，也会触发一次列表渲染，但这个影响在小数据量下可以忽略不计

代码修正（原代码缺少定时器，且setData应为setUsers）：

const [users, setUsers] = useState<{name:string, last_online:string}>([])

useEffect(()=> {
  const interval = setInterval(() => {
    fetchUsers().then(newUsers => setUsers(newUsers))
  }, 60000)

  return () => clearInterval(interval)
},[])

二、仅更新变更项 #

适用场景 #

当数据量极大（比如上千条），且列表项是独立的 memo 组件时，局部更新能减少不必要的组件渲染，提升性能。但你的场景（100个元素）完全没必要。

实现思路 #

需要通过唯一标识（比如name，最好是业务上的唯一ID）匹配新旧数据，仅更新last_online变化的项，同时处理新增/删除的元素。

示例代码：

const [users, setUsers] = useState<{name:string, last_online:string}>([])

useEffect(()=> {
  const interval = setInterval(() => {
    fetchUsers().then(newUsers => {
      setUsers(prevUsers => {
        // 用旧数据创建name到用户对象的映射
        const prevUserMap = new Map(prevUsers.map(u => [u.name, u]))
        // 处理新增/更新的用户
        const updatedUsers = newUsers.map(newUser => {
          const oldUser = prevUserMap.get(newUser.name)
          // 仅当用户存在且last_online变化时，更新该字段
          if (oldUser && oldUser.last_online !== newUser.last_online) {
            return {...oldUser, last_online: newUser.last_online}
          }
          // 不存在则直接用新用户，存在且无变化则复用旧对象
          return oldUser || newUser
        })
        // 处理被删除的用户（如果API会返回删除后的完整列表，这步可省略）
        const newUserNames = new Set(newUsers.map(u => u.name))
        return [...updatedUsers, ...prevUsers.filter(u => !newUserNames.has(u.name))]
      })
    })
  }, 60000)

  return () => clearInterval(interval)
},[])

缺点 #

• 代码复杂度大幅提升，需要处理多种边界情况（比如标识重复、字段新增/删除等）
• 小数据量下，优化效果不明显，反而增加了维护成本

最终建议 #

对于你当前的场景（最多100个元素），优先选择全量替换。代码简单可靠，性能完全够用，后续如果数据量增长到需要优化的程度，再切换为增量更新也不迟。

内容的提问来源于stack exchange，提问作者Nyi Nyi Hmue Aung