React中洗牌数组后UI未更新，使用扩展运算符则正常的原因

这核心是React判断state是否变化的逻辑导致的：

• React的state更新依赖引用比较：当你调用setItems时，React会对比新传入的值和当前state的引用是否一致。如果引用相同，React会认为数据没有变化，就不会触发组件重渲染。
• 你的shuffle函数是原地修改原数组：数组是引用类型，函数里的交换操作直接改变了传入的items数组的内容，但返回的还是同一个数组引用。所以setItems拿到的新值和旧state是同一个对象，React判定无变化，自然不会更新UI。
• 用[...array]返回新数组时，相当于创建了一个全新的数组对象，它的引用地址和原数组完全不同。这时候setItems检测到引用变化，就会触发组件重渲染，UI也就跟着更新了。

额外提一句：React的这种设计是为了性能优化，避免不必要的重渲染。所以处理引用类型的state（数组、对象）时，一定要注意不要直接修改原数据，而是返回新的引用，比如用扩展运算符、Array.map、Object.assign这类方法生成新的对象/数组。

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