是否通过props将对象传递给子反应组件，克隆原始对象或通过引用传递？ [英] Does passing an object via props to child react component, clone the original object or pass by reference?

问题描述

如果要通过组件道具将对象传递给子组件，是否会克隆此对象，还是只是将引用传递给原始对象？

If am to pass an object to a child component via the components props, does this object get cloned or does it simply pass a reference to the original object?

例如，在我的 App.js 中，我正在导入JSON对象 ENTRY_DATA 。然后我通过props将该对象传递给我的子组件（或者在这种情况下，路由）。我是通过这样做来节省内存还是就像我要在每个组件上导入 ENTRY_DATA 一样？

For example in my App.js I am importing a JSON object ENTRY_DATA. I am then passing that object via props to my child components (or in this case, routes). Am I saving on memory by doing this or would it be the same as if I was to import ENTRY_DATA on each component?

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 ？

If ENTRY_DATA is 5kb's, And I am passing it to 3 different components, does that mean I end up with 20kb's worth of ENTRY_DATA or do they all reference the one 5kb ENTRY_DATA?

推荐答案

通常，它取决于所述道具的数据类型。基元（例如整数或字符串）按其值传递，而对象数据类型（如数组）则通过其引用向下传递。

In general, it depends on the data-type of said prop. Primitives, such as integers or Strings are passed down by their value, while Object data-types such as arrays are passed down by their reference.

所以是的， Objects 特别是通过引用向下传递。

So yes, Objects specifically are passed down by reference.

演示：

在此演示中，我们有两个组件，一个父组件和一个子组件。孩子有两个道具，一个是整数 1 ，另一个是的对象a：foo 。

In this demo we have two components, one parent and one child. The child takes two props, one that is the integer 1 and the other is an object with a: "foo".

过了一会儿，从父母那里我们将整数值从 1 更改为 2 和来自的对象a：foo到 a：bar 。之后，我们从子组件中记录这些道具的值。

After a short while, from the parent we change the integers value from 1 to 2 and the object from a: "foo" to a: "bar". After that, we log the values of these props from the child component.

输出仍为 1 整数（没有改变 - 按值传递），但 a：对象的bar（已更改！ - 通过引用传递）。

The output is still 1 for the integer (didn't change - passed by value), but a: "bar" for the object (changed! - passed by reference).

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>

这篇关于是否通过props将对象传递给子反应组件，克隆原始对象或通过引用传递？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！