javascript - react : Why is it necessary to have immutable props if values are passed as by value anyway?

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 使用你传递的东西作为 props 和 state 来制作它的虚拟 DOM。因为 React 使用这些来查看是否有任何变化，并且只呈现确实发生变化的东西，所以 React 依赖于您的代码，在您将它传递给 React 之后不会更改 props 或状态。

在第二个例子中，这会导致 React 认为新旧 props 仍然相同，因此 React 会(错误地)得出不需要重新渲染的结论。