reactjs - React Tic Tac Toe，Array.slice()，可变性

Question

在 react 井字游戏中 tutorial ，为什么他们必须使用 Array.slice()？

handleClick(i) {
 const squares = this.state.squares.slice();
 squares[i] = 'X';
 this.setState({squares: squares});
}

他们改变了 state.squares 对吗？试图了解发生了什么。

Answer 1

这是创建新数组并将所有元素复制到其中的常用方法。这是为了将 new 数组传递给 setState 而不是改变旧数组 - 这不会导致组件重新呈现。

新数组将导致重新渲染。如果你像这样改变了数组:

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

react 不会收到状态发生变化的通知。