reactjs - JSX/TSX 标记是作为按值还是按引用发送的常量？

Question

我在单独的文件中有一个常量 EmptyNode.tsx :

export const EmptyNode = <></>

当我不想显示任何内容时，我用它来返回一个空节点。

示例:

...
render() {
    if(!this.props.data) {
        return EmptyNode 
    }
}
...

这是一个更高级的示例:

...
render() {
    const myContent = EmptyNode

    if(this.props.data) {
        myContent = <MyComponent data={this.props.data} />
    }

    return myContent
}
...

因此，如果它是通过引用发送的，一旦我更改它的值，我就会破坏其他地方的所有标记。

如果它是按值发送的，那么我可以安全地按原样使用它。

在这里，如果我分配 <MyComponent/>至myContent ，它会改变 EmptyNode 的值吗？对于是否使用它的所有其他代码？

Answer 1

JavaScript 是一种纯粹的按值传递语言。它没有引用传递语义所需的变量引用的概念。

在您的渲染中，当您执行以下操作时:

const myContent = EmptyNode

EmptyNode 常量中的值被复制到 myContent 中，之后 EmptyNode 和 myContent 不以任何方式链接。它们都具有相同的值(这是对对象的引用)，但常量和变量之间没有链接。

稍后，当您这样做时:

myContent = <MyComponent data={this.props.data} />

您正在创建一个对象并将该引用分配给myContent。 EmptyNode 完全不受影响。

值得注意的是，在 const myContent = EmptyNode 之后，当 myContent 和 EmptyNode 中的值相同，因此都引用同一个对象，如果您通过 myContent (myContent.foo = "bar" 或类似的)修改该对象，那么自然地，该更改是可见的通过 EmptyNode，因为它们都引用同一个对象。但这与分配给 myContent 变量完全不同。因为这可能会让人有点困惑，所以这里有一个例子:

情况1:修改变量中的值:

let a = {value: 1};
console.log(a.value); // 1
let b = a;
console.log(b.value); // 1

// At this point, we have something like this in memory:
//                      
// a:Ref11345−−−−−+    
//                |     
//                |     +−−−−−−−−−−+
//                +−−−−>|  Object  |
//                |     +−−−−−−−−−−+
//                |     | value: 1 |
// b:Ref11345−−−−−+     +−−−−−−−−−−+
//
// `a` and `b` have the same value (Ref11345) in them. (We never see
// the actual value of an object reference, Ref11345 is just notional.)

b = {value: 2};

// At this point, we have something like this in memory:
//
//                      +−−−−−−−−−−+
// a:Ref11345−−−−−−−−−−>|  Object  |
//                      +−−−−−−−−−−+
//                      | value: 1 |
//                      +−−−−−−−−−−+
//                      
//                      +−−−−−−−−−−+
// b:Ref68214−−−−−−−−−−>|  Object  |
//                      +−−−−−−−−−−+
//                      | value: 2 |
//                      +−−−−−−−−−−+
//
// `a` and `b` refer to different objects.

console.log(a.value); // 1 - the value on the original object
console.log(b.value); // 2 - the value on the new object

情况2:修改变量指向的对象

let a = {value: 3};
let b = a;

// At this point, we have something like this in memory (again):
//                      
// a:Ref52413−−−−−+    
//                |     
//                |     +−−−−−−−−−−+
//                +−−−−>|  Object  |
//                |     +−−−−−−−−−−+
//                |     | value: 3 |
// b:Ref52413−−−−−+     +−−−−−−−−−−+
//
// `a` and `b` have the same value (Ref52413) in them, they both
// refer to the same object.

console.log(a.value); // 3
console.log(b.value); // 3
// This changes the state of the object
b.value = 4;

// Now, we have something like this in memory:
//                      
// a:Ref52413−−−−−+    
//                |     
//                |     +−−−−−−−−−−+
//                +−−−−>|  Object  |
//                |     +−−−−−−−−−−+
//                |     | value: 4 |
// b:Ref52413−−−−−+     +−−−−−−−−−−+
//
// `a` and `b` still have the same value (Ref52413) in them, so
// they both still refer to the same object.

console.log(a.value); // 4 - the value on the original object (updated)
console.log(b.value); // 4 - same

---

旁注:按引用传递中的“引用”专门针对变量/参数的引用。 “对象引用”中的“引用”是“引用”一词的不同用法。这有时会让人们感到困惑。 :-) 但这只是同一个通用词以两种不同的方式使用。