Question

在tutorial on React's site中，给出了以下代码，并花了一些时间讨论不变性。

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
    };
  }

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

  renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />
    );
  }
}

...我们建议您使用.slice（）方法创建正方形数组的副本以进行修改，而不是修改现有数组。最终结果是相同的，但是通过不直接进行突变（或更改基础数据），我们可以获得一些好处

使用C#之类的语言和string不变的引用类型，当我们“突变” string时，我们实际上是在创建一个全新的string对象并根据字符串分配在某处放置引用。例如，

// C#
string squares1 = "xyz";
string squares2 = "abc";
squares1 = squares2;

将导致squares1保留对squares2指向的数据的引用。

那么setState()到底发生了什么？我特别好奇，因为有人说保存了对象的值历史吗？

React的setState（）如何保持不变性？

0 个答案: