React:如果值是按值传递的，那么为什么有必要拥有不可变的道具呢

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

本文关键字：拥有 不可变 为什么 如果 按值传递 React      更新时间：2023-09-26

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

我的意思是：他们说一个函数应该做一些事情并作为结果提供。但并没有改变整个体系。

但是，如果数据是按值传递的呢？为什么具有不变性会成为一件大事？

在这两个例子中，您都将一个字符串传递给函数。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将（错误地）得出不需要重新渲染的结论。

相关文章：