将状态作为道具传给孩子是好的做法吗？

Question

我发现自己在一个组件上聚合状态.通常我知道的节点我将重新渲染,因此变化可以传播,并且状态不是全部.最近,我发现自己将这个组件的状态作为道具传递给第一个使用JSX传播属性的孩子.为了绝对清楚,这就是我的意思:

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),你可以随时回到这个组件来了解最新情况并尽可能保持最小状态.

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

我现在可以考虑的缺点是,使用这种方法,当所有者状态发生变化时,每个子组件都可能会重新渲染,如果是这种情况,我认为上面的内容可以在小组件树上使用.

Answer 1

是!

状态应仅设置在顶级元素上,这可确保数据仅在组件中单向流动.

请记住,React将仅渲染自上次渲染以来所做的更改,如果未修改子元素的某些部分,则不会将其重新渲染到DOM.

React在他们的文档中有一个标题为提升状态的部分.