javascript - When to use state and when props? - Stack Overflow

admin管理员组

文章数量:1244423

I am studying the principles of react.

According to some reviews, some people says is better to keep your ponent stateless, what does it mean?

But other people says, that if you need to update your ponent, then you should learn how to set your state to the proper state.

I saw this.props / this.setProps and this.state / this.setState and I am confuse with that.

Something I am trying to figure is, how can I update a ponent by itself and not from a parent ponent? should I use props or state in this case?

I already read some docs about props and state, what I don't have clear, is: when to use one or another ?

I am studying the principles of react.

According to some reviews, some people says is better to keep your ponent stateless, what does it mean?

But other people says, that if you need to update your ponent, then you should learn how to set your state to the proper state.

I saw this.props / this.setProps and this.state / this.setState and I am confuse with that.

Something I am trying to figure is, how can I update a ponent by itself and not from a parent ponent? should I use props or state in this case?

I already read some docs about props and state, what I don't have clear, is: when to use one or another ?

• javascript
• reactjs

Share Improve this question Follow asked Oct 14, 2015 at 2:36 NonNon 8,5892020 gold badges8080 silver badges130130 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 14

Props vs. state es down to "who owns this data?"

If data is managed by one ponent, but another ponent needs access to that data, you'd pass the data from the one ponent to the other ponent via props.

If a ponent manages the data itself, it should use state and setState to manage it.

So the answer to

how can I update a ponent by itself and not from a parent ponent? should I use props or state in this case?

is to use state.

Props should be considered immutable and should never be changed via mutation. setProps is only useful on a top-level ponent and generally should not be used at all. If a ponent passes another ponent a property, and the first ponent wants the second to be able to change it, it should also pass it a function property that the second ponent can call to ask the first ponent to update its state. For example:

var ComponentA = React.createClass({
  getInitialState: function() {
    return { count: 0 };
  },

  render: function() {
    return <Clicker count={this.state.count} incrementCount={this.increment} />;
  },

  increment: function() {
    this.setState({count: this.state.count + 1});
  }
});

// Notice that Clicker is stateless! It's only job is to
// (1) render its `count` prop, and (2) call its
// `incrementCount` prop when the button is clicked.
var Clicker = React.createClass({
  render: function() {
    // clicker knows nothing about *how* to update the count
    // only that it got passed a function that will do it for it
    return (
      <div>
        Count: {this.props.count}
        <button onClick={this.props.incrementCount}>+1</button>
      </div>
    );
  }
});

(Working example: https://jsbin./rakate/edit?html,js,output)

For and object-oriented programming analogy, think of a class/object: state would be the properties you put on the class; the class is free to update those as it sees fit. Props would be like arguments to methods; you should never mutate arguments passed to you.

---

Keeping a ponent "stateless" means that it doesn't have any state, and all its rendering is based on its props. Of course, there has to be state somewhere or else your app won't do anything! So this guideline is basically saying to keep as many ponents as possible stateless, and only manage the state in as few top-level ponents as possible.

Keeping ponents stateless makes them easier to understand, reuse, and test.

See A brief interlude: props vs state in the React docs for more information.

Use state when you know the variable value is going to affect the view. This is particularly critical in react, because whenever the state variable changes there is a rerender(though this is optimized with the virtual DOM, you should minimize it if you can), but not when a prop is changed (You can force this, but not really needed).

You can use props for holding all other variables, which you think can be passed into the ponent during the ponent creation.

If you have want to make a multi-select dropdown called MyDropdown for example

state = {
    show: true,
    selected:[],
    suggestions:this.props.suggestionArr.filter((i)=>{
        return this.state.suggestions.indexOf(i)<0;
    })
}

props={
   eventNamespace:'mydropdown',
   prefix : 'm_',
   suggestionArr:[],
   onItemSelect:aCallbackFn
}

As you can see, the objects in the state variable are going to affect the view some way or the other. The objects in the props are mostly objects which should remain the same throughout the ponent life cycle. So these objects can be callback functions, strings used to namespace events or other holders.

So if you do want to update the ponent by itself, you need to have to look into how ponentWillRecieveProps ,ponentWillUpdate, ponentDidUpdate and ponentShouldUpdate works. More or less, this depends on the requirement and you can use these lifecycle methods to ensure that the rendering is within the ponent and not in the parent.

本文标签： javascriptWhen to use state and when propsStack Overflow