React setState中两种数组排序代码为何一个生效一个失效？

首先明确两段代码的核心差异：

• 第一段代码：

  [...arr].sort((a,b) => {
    return a - b;
  })
  

  通过扩展运算符[...arr]创建了原数组的全新副本，再对这个新数组执行排序，最终返回的是一个新的数组引用。

• 第二段代码：

  arr.sort((a,b) => {
    return a - b;
  })
  

  Array.sort()是原地排序方法，它会直接修改原数组的内部内容，并且返回的还是原数组的引用（没有创建新数组）。

React的状态更新依赖引用变化的浅比较触发重新渲染：

• 当调用setState时，React会对比新状态与旧状态的引用是否一致。如果是同一个对象/数组（引用相同），哪怕内部数据已经改变，React也会判定状态没有发生有效更新，不会触发组件重新渲染。
• 只有当新状态的引用和旧状态不同时，React才会认为状态确实更新，进而启动重新渲染流程。

对应到你的场景：

• 第一段代码传入setState的是新数组，引用和原状态数组不同，React检测到变化，正常触发重新渲染，排序效果能在页面上体现。
• 第二段代码传入setState的还是原数组的引用，React浅比较后判定状态无变化，不会触发重新渲染——实际上数组内容已经被修改，但组件没有重新渲染展示新的排序结果。

本质原因：React不会深度检测数组/对象的内部内容变化，仅通过引用是否改变来判断状态是否需要更新。直接修改原状态内容并复用引用，无法触发React的更新机制。

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