ReactJS：是否应该将大量对象作为道具传递给许多子组件级？

Question

我正在查看一位同事的ReactJs代码，并注意到他正在将自定义对象数组向下传递给5个级别的子组件作为道具。他正在这样做，最底层的子组件需要该数组的计数才能执行某些UI逻辑。

最初，我担心将大量潜在的对象传递给组件层次结构的许多层次，只是为了使底层的对象可以利用其数量来做某事。但是后来我在想：也许这没什么大不了的，因为props数组可能是通过引用传递的，而不是创建该数组的副本。

但是由于我是React的新手，所以我想在这里问这个问题，以确保我的假设是正确的，并查看其他人是否对通过这样的道具和任何更好的方法有任何想法/评论。

Answer 1

关于传递的数组，我相信它确实是一个参考，并且从性能角度来看这样做没有任何真正的缺点。

最好以这种方式提供长度，Child Context这样您就不必手动将道具传递给一堆不一定关心的组件。

而且，似乎只传递长度会更清楚，因为组件不关心数组中的实际对象。

因此，在保存数组的组件中，第 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;

然后在第 5 级孩子中，他本身就是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;