gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 21:32:33 26 4
gpt4 key购买 nike

我在单独的文件中有一个常量 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 的值吗对于是否使用它的所有其他代码?

最佳答案

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

在您的render 中,当您执行此操作时:

const myContent = EmptyNode

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

稍后,当您这样做时:

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

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

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

案例一:修改变量中的值:

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


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

关于reactjs - JSX/TSX 标记是按值还是按引用发送的常量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57306135/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com