React井字棋教程中为何使用Array.slice()？

这个问题问得特别好——很多刚接触React的开发者都会疑惑：明明最终都是要更新state里的squares，为什么非要多一步slice()的操作？我来给你拆解清楚背后的原理：

1. React的核心原则：状态不可变性 #

React要求你永远不要直接修改state中的数据（不管是数组、对象还是其他复杂类型）。比如如果直接写：

this.state.squares[i] = 'X';

这就违反了不可变性原则。原因在于：React的状态更新机制是通过检测引用变化来判断是否需要重新渲染组件的。如果你直接修改原数组，数组的内存引用并没有改变（还是同一个数组对象），React会误以为状态没有变化，从而不会触发组件的重新渲染，你的界面也就不会更新显示新的棋子位置。

2. slice()的作用：创建新的数组引用 #

代码里的const squares = this.state.squares.slice();其实是在做一件关键的事：创建原数组的浅拷贝。当slice()不带任何参数时，它会返回一个从索引0到数组末尾的新数组，这个新数组和原数组的内存引用完全不同。

之后我们修改的是这个新数组的元素：

squares[i] = 'X';

再通过setState把这个新数组赋值给state，此时state的引用发生了变化，React能准确检测到状态更新，进而触发组件重新渲染，界面就能正确显示棋子的位置了。

3. 额外的关键好处：支持"时间旅行"功能 #

这个井字棋教程后续会实现悔棋功能，需要记录每一步的棋盘状态。如果我们每次都是直接修改原数组，之前的状态就会被覆盖，根本没法回溯到上一步。而通过slice()创建新数组的方式，每一步的棋盘状态都是独立的、不可变的，我们可以把所有历史状态存在一个数组里，轻松实现前进、后退的功能——这就是不可变性带来的巨大便利。

4. 配合性能优化工具正常工作 #

如果你后续用到React.PureComponent或者memo来优化组件性能，它们会通过浅比较来判断是否需要重新渲染组件。如果直接修改原数组，浅比较会认为前后状态的引用相同，导致组件不会更新，出现界面不刷新的bug。而使用slice()创建新数组，就能让这些性能优化工具正常发挥作用。

总结一下：slice()并不是多余的操作，它是遵循React不可变状态原则的关键一步，既保证了组件能正确响应状态更新，也为后续的功能扩展（比如悔棋）打下了基础。

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