Question

我正在查看我同事的一个ReactJs代码，并注意到他将一系列自定义对象传递给5个级别的子组件作为道具。他正在这样做b / c底层子组件需要该数组来执行一些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;

Answer 2

我认为将大数组作为道具传递没有任何问题，即使Facebook正在他们关于Flux的教程中做到这一点。

由于您将数据传递给这么多杠杆，您应该使用反应上下文。

Context允许子组件请求一些数据到达位于层次结构中较高位置的组件。

您应该阅读有关The Context的这篇文章，这可以帮助您解决问题。

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

2 个答案: