React中点击按钮将更新后的数组项移至开头有什么更优实现方案？

优化实现方案 #

1. 简洁可读版（O(n)时间复杂度，适合绝大多数中小数据量场景）

const completeTaskHandler = (idValue) => {
  setData((prevData) => {
    // 不可变更新目标项的completed状态，避免修改原状态对象
    const targetTask = prevData.find(item => item.id === idValue)
    const updatedTask = { ...targetTask, completed: true }
    // 直接将更新后的任务项放在头部，剩余项过滤掉原目标项后拼接在后面
    return [updatedTask, ...prevData.filter(item => item.id !== idValue)]
  })
}

这个方案比原实现少一次数组遍历，同时遵守React状态不可变更新原则，避免直接修改原状态对象引发的潜在渲染异常。

2. 高性能版（仅遍历一次数组，适合千条以上大数据量场景）

const completeTaskHandler = (idValue) => {
  setData((prevData) => {
    return prevData.reduce((result, current) => {
      if (current.id === idValue) {
        // 匹配到目标项时，更新后插入结果数组头部
        result.unshift({ ...current, completed: true })
      } else {
        // 其余项直接追加到结果数组尾部
        result.push(current)
      }
      return result
    }, [])
  })
}

扩展需求适配：所有已完成任务统一排在最前面

如果你的需求是所有已完成任务都排在数组头部，未完成任务在尾部，同时刚标记完成的任务排在已完成列表的最前位置，可以用以下实现：

const completeTaskHandler = (idValue) => {
  setData((prevData) => {
    // 先更新目标项状态
    const updatedList = prevData.map(item => 
      item.id === idValue ? { ...item, completed: true } : item
    )
    // 排序：已完成项优先，同状态保持原有相对顺序
    return updatedList.sort((a, b) => b.completed - a.completed)
  })
}

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