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

Question

我发现自己将状态聚合到一个组件上。通常我知道我会 re-render 的节点，这样更改就可以传播并且状态不会到处都是。最近，我发现自己在大多数情况下使用 JSX spread attributes 将此组件的状态作为道具传递给它的第一个 children。明确地说，这就是我的意思：

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)，您可以随时返回此组件以了解正在发生的事情并尽可能保持状态最小。

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

目前我能想到的缺点是，使用这种方法，当所有者的状态发生变化时，每个 child 组件可能总是 re-render，如果是这样的话，我认为以上是在小型组件树上使用的东西。

Answer 1

是的！

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

请记住，React 只会渲染自上次渲染以来所做的更改，如果您的 child 元素的某些部分未被修改，则它们不会 re-rendered DOM.

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

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

Is good practice to pass state as props to children?

javascript

reactjs