Question

这个问题涉及React的实现细节，更具体地说，涉及状态封装。

this回答this问题的演示证明作为对象的React道具是通过引用传递的，在此转载：

const Parent = () => { 
  let myInt = 1;
  let myObj = {a: "foo"};
  setTimeout(function(){
    myInt = 2;
    myObj.a = "bar";
  }, 500);
 
  return <Child myInt={myInt} myObj={myObj} />;
}

const Child = ({myInt, myObj}) => {
  setTimeout(function(){
    console.log(myInt);
    console.log(myObj);
  }, 1000);
  
  return (
    <div>
      <p>{myInt}</p>
      <p>{JSON.stringify(myObj)}</p>
    </div>
  );
}
 
ReactDOM.render(<Parent />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

在React中可以将状态作为prop传递给子组件。鉴于对象/数组道具是通过引用传递的，React如何维护状态封装？

子组件是否在本地复制传递给它的道具？因此，子组件不关心支柱的起源是状态（即，避免在父组件的级别上状态改变的风险被反映在传递给子组件的支柱中）。

Answer 1

对象永远不会自己传递，而是对对象的引用（最终隐式创建）。该引用按值传递，如下面的代码段所示。

＆＃13;

console.log("Initial Object a:");
a = {helloKey: "helloVal"};
console.log(a);
function useObj(obj){
  console.log("Reference a copied to obj inside function:");
  console.log(obj);
  obj = {byeKey:"byeVal"};
  console.log("obj edited:");
  console.log(obj);
}

useObj(a);
console.log("a is untouched:");
console.log(a);

＆＃13;

调用someFunc({myKey:"myVal"})并不意味着将Object作为参数传递，而是对其他未引用的Object进行隐式引用（否则，它将排队等待垃圾回收。

props是不可变的。

引用存储其中一种Javascript类型的变量的地址，包括Objects。由于您将引用的（浅）副本作为参数传递，这意味着引用仍然是＆＃34;引用＆＃34;同样的记忆。即使传递的引用是副本。

在将状态作为prop传递给子组件时，React如何维护状态封装？

1 个答案: