React中更新关联props的state时props同步更新的原因

你碰到的这个情况，核心是引用类型的浅拷贝和共享引用导致的，具体有两种常见场景：

• 场景一：someArray与父组件的myArray共享内部引用类型元素
  你代码里用[...myArray]做的是浅拷贝——如果myArray里存的是对象、数组这类引用类型，tempArray里的元素和myArray里的元素指向的是同一个内存地址。比如myArray = [{id: 1}]，浅拷贝后tempArray里的{id:1}和myArray里的是同一个对象。
  如果你传给setTempArray的someArray是基于这个tempArray修改而来（比如修改了内部对象的属性），那本质上是在修改和myArray共享的那个对象，父组件的myArray（如果是父组件的state的话）自然会跟着变化，因为它们指向同一个内存对象。

• 场景二：你直接把myArray本身传给了setTempArray
  比如你写了setTempArray(myArray)，这时候tempArray和myArray指向同一个数组引用。后续如果直接修改tempArray（比如用push/pop这类直接修改数组的方法），就会直接修改到父组件的myArray，因为它们是同一个数组实例。

简单验证方法：

• 打印myArray === tempArray，如果返回true，说明两者是同一个数组引用；
• 如果返回false，再打印myArray[0] === tempArray[0]，如果是true，说明内部元素是共享的引用类型。

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