ReactJS-父母的状态是作为浅拷贝还是深度拷贝传递给孩子

Question

因此，正如我们所知，Shallow Copy与Deep Copy之间的区别在于：浅拷贝

a=5;
b=a; // b point to a's address in the memory. if a changes, b changes.

深度复制

a=5;
b=a; // b holds the actual value 5. if a changes, b remains the same.

酷，现在，我的问题是：将状态作为道具传递给孩子是否被视为"深度"复制或"浅层"复制？

我倾向于认为这是一个深度复制，然后又提出了另一个问题——这不是浪费资源吗？

干杯！

Answer 1

将状态作为道具传递根本不会复制任何内容。两个位置使用完全相同的值。举个小例子：

let parentObj;
const App = () => {
const [parentStateObj, setParentStateObj] = React.useState({ prop: 'val' });
parentObj = parentStateObj;
return <Child obj={parentStateObj} />;
};
const Child = ({ obj }) => {
console.log(obj === parentObj);
return 'foo';
};
ReactDOM.createRoot(document.querySelector('.react')).render(<App />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>

这与在第一个片段中的评论有点相似

//b指向内存中a的地址。如果a改变，b就会改变。

除了

• 不发生复制
• 如果其中一个值被重新分配(在父级或子级中(，则不会对另一个值产生任何影响-重新分配变量本身没有任何副作用
• 如果其中一个值是突变的(在父级或子级中(，而如果您设置为观察它，则在两个组件中都可以看到变化，您永远不应该在React中突变状态。相反，您应该使用新状态调用状态设置器，然后它将触发重新呈现

---

浅拷贝通常指以下其中一种，它实际上创建了一个单独的数组或对象：

const shallowCopyArr = [...arr];
const shallowCopyObj = { ...obj };

深度复制是指递归地迭代对象或数组中的每个嵌套值，以创建一个新值，这有点复杂。