react 引导中关于"Immutability"的疑问

Question

https://facebook.github.io/re...handleClick(i) {    const squares = this.state.squares.slice();     squares[i] = 'X';    this.setState({squares: squares});   }Determining if a mutated object has changed is complex because changes are made directly to the object. This then requires comparing the current object to a previous copy, traversing the entire object tree, and comparing each variable and value. This process can become increasingly complex.Determining how an immutable object has changed is considerably easier. If the object being referenced is different from before, then the object has changed. That's it.以上摘自React的引导, 有个关于slice()的疑问: 为什么要复制一份数据呢? 使用slice()复制出来的数据对比差异还是要全部遍历

Answer 1

文档里说了，如果你不做immutable的话，你就没办法知道有没有改变，因为你改的是对象，举个简单的例子说明：

function blackbox(arr) {

   /**

    * 在这里可以对arr直接做任何处理，也可以不做任何处理

    * 比如：arr[Math.floor(Math.random() * arr.length)] = 2;

    */

   return arr;

}

var array = [5,21,54,43,542,213,43,6,2];

var result = blackbox(arr);

// 我想知道新的result是否发生了改变，该怎么办？

console.log(array === result); // true...直接对比，没办法比较

console.log(array.join() === result.join()); // true ...对比内容，没办法知道

而如果

function blackbox(arr) {

  if(我要改变) {

    let result = arr.slice();

    /**

    * 在这里可以对result直接做任何处理

    */

    return result;

  } else return arr;  

}

这个样子：

var array = [5,21,54,43,542,213,43,6,2];

var result = blackbox(arr);

// 我想知道新的result是否发生了改变，该怎么办？

console.log(array === result); // 如果发生改变，那么就是false。不改变，是true

console.log(array.join() === result.join()); // 如果发生改变，那么就是false。不改变，是true