Как React setState () сохраняет неизменность? - PullRequest
Новая
       21

Как React setState () сохраняет неизменность?

0 голосов
/ 25 мая 2019

В руководстве на сайте React приведен следующий код, и для обсуждения неизменности используется момент.

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;

приведет к тому, что квадраты1 будут содержать ссылку на данные, на которые указывают квадраты 2.

Так что же происходит под капотом с setState()?Мне особенно любопытно, поскольку утверждается, что история значений для объекта сохраняется?

...