为何useState更新数组需用展开运算符？子组件不渲染问题解析

两种写法差异的核心原因 #

• JavaScript的Array.sort()是原地修改数组的方法，它会直接改变原数组的元素顺序，返回的还是原数组的引用。当你直接返回prev.sort(...)时，虽然数组内部元素顺序变了，但randomizedLetters的引用和之前完全一样。React的状态更新是通过对比引用是否变化来判断是否需要触发渲染的，引用没改，React就认为状态没有实质更新，自然不会让子组件Hive重新渲染。
• 而[...prev.sort(...)]是先完成原地排序，再用扩展运算符创建一个全新的数组实例，返回的是新的引用。React检测到状态的引用发生了变化，就会触发组件更新，子组件Hive拿到新的props后也会重新渲染。

你的操作优化建议 #

整体逻辑没问题，但有两个细节可以改进：

1. 随机排序的公平性：0.5 - Math.random()这种排序方式并不均匀，因为sort的比较函数需要稳定返回-1、0、1这类确定值，随机返回值会导致排序结果有偏差。更靠谱的是用Fisher-Yates洗牌算法，能实现真正公平的随机打乱：

const shuffle = (arr) => {
  const newArr = [...arr];
  for (let i = newArr.length - 1; i > 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1));
    [newArr[i], newArr[randomIndex]] = [newArr[randomIndex], newArr[i]];
  }
  return newArr;
};

之后在事件里调用：

const randomevent = () => {
  setRandomizedLetters(prev => shuffle(prev));
};

2. 初始状态的Immutable写法：虽然actualLetters.slice(1)会返回新数组，但后面的sort还是原地修改了这个新数组。为了保持状态更新的Immutable原则，初始状态可以改成：

const [randomizedLetters, setRandomizedLetters] = useState(
  shuffle(actualLetters.slice(1))
);

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