javascript - Is good practice to pass state as props to children? - Stack Overflow

admin管理员组

文章数量:1252781

I find myself aggregating the state on one ponent. Normally the node I know I will re-render so changes can propagate and state is not all over the place. Lately, I've found myself passing the state of this ponent as props to its first children using JSX spread attributes for the most part. Just to be absolutely clear, this is what I mean:

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}/>
  }
});

And it works (,js,output), you can always go back to this ponent to understand whats going on and keep state as minimal as possible.

So the actual question is, if that is/isn't a good practice and why.

The downside I can think about at the moment is that with this approach maybe every child ponent would always re-render when there is a state change on the owner, if that's the case I think the above is something to use on small Component trees.

I find myself aggregating the state on one ponent. Normally the node I know I will re-render so changes can propagate and state is not all over the place. Lately, I've found myself passing the state of this ponent as props to its first children using JSX spread attributes for the most part. Just to be absolutely clear, this is what I mean:

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}/>
  }
});

And it works (http://jsbin./xugurugebu/edit?html,js,output), you can always go back to this ponent to understand whats going on and keep state as minimal as possible.

So the actual question is, if that is/isn't a good practice and why.

The downside I can think about at the moment is that with this approach maybe every child ponent would always re-render when there is a state change on the owner, if that's the case I think the above is something to use on small Component trees.

• javascript
• reactjs

Share Improve this question Follow edited Jan 5, 2017 at 17:43 stringparser asked Apr 22, 2015 at 11:41 stringparserstringparser 74511 gold badge66 silver badges1717 bronze badges 4

• It isn't very prescriptive and easy to follow what's being sent to the children when the parent is passing all local state as you've done with spread attributes. In fact, depending on the plexity of the ponent, it may be difficult to reason about what's being sent. I'd also be surprised that the child actually needs all of the parent's state. – WiredPrairie Commented Apr 22, 2015 at 11:56
• 1 Yes, that would depend on the situation. To see what is being sent you just have to look at the parent. The reason why I like this is that is clear from where the state es and renders from. – stringparser Commented Apr 22, 2015 at 16:10
• If the parent is defined locally, it's easy. But as a project grows in scope, and a ponent is used by multiple types of parents, the challenge could magnify. – WiredPrairie Commented Apr 22, 2015 at 19:25
• Yeah, for "nearby" ponents is fine. Though to track down props propagating from one ponent to the next on a large hierarchy would be less easy that to look at this.props.owner from the ponent you are in any case. – stringparser Commented Apr 23, 2015 at 8:38

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 23

Yes!

State should only be set on the top level element, this ensures that data only ever flows one way through your ponents.

Bear in mind, React will only render the changes that have been made since the last render, if parts of your child elements haven't been modified they will not be re-rendered to the DOM.

React has a section in their docs titled lifting up state.

本文标签： javascriptIs good practice to pass state as props to childrenStack Overflow