React:如果按值传递值,为什么有必要使用不可变的道具?

时间:2016-07-31 07:01:38

标签: javascript reactjs functional-programming

我对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中具有这些不变性功能?

我的意思是:他们说一个函数应该做某事并提供结果。但不要整体改变系统。

但是,如果按值传递数据呢?为什么在不变性方面做出如此大的事情呢?

1 个答案:

答案 0 :(得分:3)

在两个示例中,您都将字符串传递给函数。 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使用这些来查看是否有任何更改,并且只渲染确实发生了变化的东西,所以做出反应依赖于你的代码,在你传递反应之后不要更改道具或状态。

在第二个例子中,这将导致反应认为新旧道具仍然相同,因此反应将(错误地)推断出它不需要重新渲染。