JSX/TSX 标记是通过值还是通过引用发送的常量？

Posted 2023-02-22

【中文标题】JSX/TSX 标记是通过值还是通过引用发送的常量？

【英文标题】：Is JSX/TSX markup as a constant sent by value or by reference?

【发布时间】：2019-12-09 21:08:16

【问题描述】：

我在单独的文件中有一个常量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 的值？

【问题讨论】：

一点问题都没有，但 EmptyNode 不是没用吗？你可以只返回 null

同意，但更多是为了说明。实际上，我可以添加更多内容而不仅仅是<></>，例如<div>No data</div>.

【参考方案1】：

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

在你的render 中，当你这样做时：

const myContent = EmptyNode

EmptyNode 常量中的值 被复制到myContent，之后EmptyNode 和myContent 将以任何方式链接。它们都具有相同的值（即对对象的引用），但常量和变量之间没有联系。

稍后，当你这样做时：

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

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

值得注意的是，在const myContent = EmptyNode 之后，当myContent 和EmptyNode 具有相同的值并因此都引用同一个对象时，如果您通过@ 修改那个对象 987654333@（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

---

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

【讨论】：

这在 OP 的情况下有点误导，因为 React 元素对象（由 JSX 或 React.createElement() 构造）是一个可变的普通对象。

@AKX - 对象是否可变并不重要。事实上，它甚至比它是一个对象无关紧要。为myContent 变量分配一个新值无论如何都不会影响EmptyNode 中的值，也不会修改它所引用的对象。但也许我应该注意，分配给该对象（而不是变量）上的 property 会有问题，尽管人们通常不会分配给 React 元素上的属性。

@AKX - 我添加了一些图表来帮助区分。 :-)

【参考方案2】：

只要不改变它，您就可以在任何需要的地方安全地共享 JSX 元素。

不支持变异元素，并且具有...特殊效果，似乎。我不知道这里发生了什么，真的。 :)

const thing = <div></div>;

const App = () => 
  const [counter, setCounter] = React.useState(1);
  thing.props.children = Array(counter).fill('Hello!').join(' ');  // don't do this IRL
  thing.key = counter; // force update
  return <div>thing <button onClick=() => setCounter(counter + 1)>Increment</button></div>;
;

ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>