反应：如果值是按值传递的，为什么有必要使用不可变的道具？

Question

我不太喜欢JavaScript。因此，我们进行了以下修补：

var demo = 'test';

var obj = {
  x: 'abc'
}

function foo(str) {
  str += '_123';

  return str;
}

var ret = foo(demo);
var retObj = foo(obj.x);

console.log('Result: %s', ret); // => 'test_123'
console.log('Used parameter: %s', demo); // 'test'

console.log('Result: %s', retObj); // 'abc_123'
// The value of the property is still unchanged. So
//  it has been passed in as by value. As as copy.
console.log('Used parameter: %s', obj.x); // 'abc'

我向函数传递一个字符串。一次作为基元变量，下一次作为对象属性。

之后，原始数据保持不变=

现在我想知道：

为什么它们在React中具有这些不变性特性？

我的意思是：他们说函数应该做一些事情，并提供结果。但不改变整个系统。

但如果数据还是按值传递呢？为什么有了不变性，世界变得如此重要？

Answer 1

在这两个示例中，都将字符串传递给函数obj是一个对象，但是obj.x是一个字符串。

JavaScript将字符串和数字（原语）视为不可变的。因此，如果你这样做：

var a = "bob";
var b = a;
b = "jack";

原始字符串a将保持不变。

但对象是不同的。如果您这样做：

var propsObj = { name: "bob" };
var newPropsObj = propsObj;
newPropsObj.name = "jack";

然后propsObj也会改变，所以propsObj现在是{name:“jack”}。

React使用您传递的东西作为道具和状态来创建其虚拟DOM。因为react使用这些来查看是否有任何更改，并且只呈现确实更改的内容，所以react依赖于您的代码，在您将其传递给react之后，不会更改道具或状态。

在第二个例子中，这将导致react认为新道具和旧道具仍然是相同的，因此react将（错误地）得出不需要重新渲染的结论。