将状态作为道具传递给孩子是一种好的做法吗？答案

【问题标题】：Is good practice to pass state as props to children?将状态作为道具传递给孩子是一种好的做法吗？
【发布时间】：2015-04-22 11:41:33
【问题描述】：

我发现自己在一个组件上聚合状态。通常，我知道我会重新渲染节点，以便更改可以传播并且状态不会到处都是。最近，我发现自己使用JSX spread attributes 将这个组件的状态作为道具传递给它的第一个孩子。为了绝对清楚，这就是我的意思：

var Child = React.createClass({
  handleClick: function(){
    this.props.owner.setState({
      count: this.props.count + 1,
    });
  },
  render: function(){
    return <div onClick={this.handleClick}>{this.props.count}</div>;
  }  
});

var Parent = React.createClass({
  getInitialState: function(){
    return {
      count: 0,
      owner: this
    };
  },
  render: function(){
    return <Child {...this.state}/>
  }
});

而且它有效 (http://jsbin.com/xugurugebu/edit?html,js,output)，您可以随时返回此组件以了解正在发生的事情并尽可能保持状态最小化。

所以实际的问题是，如果这是/不是一个好的做法，为什么。

目前我能想到的缺点是，通过这种方法，当所有者的状态发生变化时，每个子组件可能总是会重新渲染，如果是这种情况，我认为上面的内容可以用于小型组件树。

【问题讨论】：

当父级传递所有本地状态时，正如您对传播属性所做的那样，跟踪发送给子级的内容并不是很规范和容易。事实上，根据组件的复杂性，可能很难推断要发送的内容。我也很惊讶孩子实际上需要父母的所有状态。
是的，这取决于具体情况。要查看发送的内容，您只需查看父项。我喜欢这个的原因是状态从哪里来和从哪里渲染的很清楚。
如果在本地定义了父级，那就简单了。但是随着项目范围的扩大，并且一个组件被多种类型的父母使用，挑战可能会变得更大。
是的，“附近”的组件很好。尽管在一个大的层次结构中追踪从一个组件传播到下一个组件的 props 并不像在任何情况下从你所在的组件中查看 this.props.owner 那样容易。

标签： javascript reactjs

【解决方案1】：

是的！

State 应该只设置在顶级元素上，这样可以确保数据只以一种方式流经您的组件。

请记住，React 只会渲染自上次渲染以来所做的更改，如果您的部分子元素没有被修改，它们将不会重新渲染到 DOM。

React 在他们的文档中有一个名为 lifting up state 的部分。

【讨论】：

对！我没有想到差异。所以你说的是差异算法将负责重新渲染的意义，所以即使它传播它也只会确保重新渲染到 DOM 那些实际上有一些变化.我认为，如果坚持下去，我会衡量一些东西并这样做，以了解这种方法会发生什么。
@stringparser 正确。 React 使用虚拟 DOM 来区分任何更改。然后这些变化，只有这些变化才会被渲染到真实的 DOM 中。 jsperf上有很多React渲染测试比如jsperf.com/react-vs-pure-js/9
虽然我同意这一点并且我一直这样做，但我发现这篇文章中的这句话很有趣reactjs.org/docs/thinking-in-react.html“它是通过道具从父母那里传递过来的吗？如果是这样，它可能不是” t 状态。