ReactJS: If a large array of objects is passed to many levels of child components as props?

Question

I look at my colleague's ReactJs code and notice that it passes an array of user objects up to 5 levels of child components as props. It does this b / c so that the lower-level child component needs this array to execute some user interface logic.

At first, I was worried about passing a potentially large array of objects down to this level of the component hierarchy, so the bottom could use its count to do something. But then I thought: maybe this does not really matter, since the array of details is probably passed by reference, and does not create copies of this array.

But since I'm new to React, I want to go further and ask this question here to make sure my assumptions are correct, and see if others have any thoughts / comments about the transfer of such details and any better approach.

Answer 1

As far as the transmitted array is concerned, I believe that this is really background information, and there is no real flaw for this in terms of performance.

It’s better to make the length available on Child Contextsuch that you don’t have to manually pass the props through a bunch of components that don’t necessarily care.

it also seems that it would be more clear to pass only the length, since the component does not care about real objects in the array.

, , , 5- :

var React = require('react');

var ChildWhoDoesntNeedProps = require('./firstChild');

var Parent = React.createClass({

  childContextTypes: {
    arrayLen: React.PropTypes.number
  },

  getChildContext: function () {
    return {
      arrayLen: this.state.theArray.length
    };
  },

  render: function () {
    return (
      <div>
        <h1>Hello World</h1>
        <ChildWhoDoesntNeedProps />
      </div>
    );
  }
});

module.exports = Parent;

, ChildWhoDoesntNeedProps

var React = require('react')

var ArrayLengthReader = React.createClass({

    contextTypes: {
      arrayLen: React.PropTypes.number.isRequired
    },

    render: function () {
      return (
        <div>
          The array length is: {this.context.arrayLen}
        </div>
      );
    }
});

module.exports = ArrayLengthReader;

Answer 2

, Facebook Flux.

, contex.

, .

, .