javascript - 是通过 Prop 将对象传递给子 react 组件，克隆原始对象还是通过引用传递？

Question

如果我要通过 components 属性将对象传递给子组件，这个对象是被克隆还是只是传递对原始对象的引用？

例如，在我的 App.js 中，我正在导入一个 JSON 对象 ENTRY_DATA。然后我通过 Prop 将该对象传递给我的子组件(或在本例中为路由)。我这样做是在节省内存还是与在每个组件上导入 ENTRY_DATA 一样？

import React, { Component } from 'react';
import { withRouter, Route } from 'react-router-dom'
import ENTRY_DATA from './../../entry_data.json';


import Register from '../Register/Register';
import Categories from '../Categories/Categories';
import Category from '../Category/Category';
import Entry from '../Entry/Entry';

class App extends Component {

  render() {

    return (
      <div className="app" >

        <main>
          <Route exact path="/" component={Register} />
          <Route exact path='/categories' render={(props) => (
            <Categories {...props} categories={ENTRY_DATA} />
          )}/>
          <Route exact path='/categories/:category' render={(props) => (
            <Category {...props} categories={ENTRY_DATA} />
          )}/>
          <Route exact path='/categories/:category/:entry' render={(props) => (
            <Entry {...props} categories={ENTRY_DATA} />
          )}/>
        </main>

      </div>
    );
  }
}

export default withRouter(App);

如果 ENTRY_DATA 是 5kb，并且我将它传递给 3 个不同的组件，这是否意味着我最终得到了 20kb 的 ENTRY_DATA 或者它们是否都引用了一个5kb ENTRY_DATA?

Answer 1

一般来说，这取决于所述 prop 的数据类型。 整数 或 字符串 等基本类型通过其值传递，而对象数据类型(如数组)通过引用传递。

所以是的，对象特别通过引用传递。

---

演示:

在这个演示中，我们有两个组件，一个父组件和一个子组件。 child 接受两个 Prop ，一个是整数 1，另一个是带有 a: "foo" 的对象。

片刻之后，我们从父级将整数值从 1 更改为 2 并将对象从 a: "foo"到 a: "bar"。之后，我们从子组件中记录这些 props 的值。
注意:这是一个无状态组件，因此我们没有使用任何类型的状态。我们直接改变值，所以 React 永远不会“知道”这个改变! _{(ssh，不要告诉 React!)}

整数的输出仍然是 1(没有改变 - 按值传递)，但是对象的输出是 a: "bar"(改变了! - 通过了通过引用)。

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>