Reactjs-2-props vs State

Props Understand:

Most components can be customized by different parameters when they are created, and these different parameters are called props.
The flow of props is the parent component to the child component.

Subcomponent Comment, is a comment component, the parent component Commentlist, shows all the comments, the parent component when using subcomponents is <comment/> Time, not only want to use a common Comment component, Want to use a custom Comment component <comment text= ' AAA '/>,text custom is Comment content, here text is a props, the idea of the parent component is good, but the mates without subcomponents cannot be implemented. So how do subcomponents implement this customization when rendering components? Subcomponents need to be this.props.text to get the parent component to their own customization, usually, not all subcomponents can get the favor of the parent component, to prevent the child component does not get the parent component props, then the subassembly comment component plus static Defaultprops = {text: ' I am the default '}

 1  //  2  class Comment extends Component { 3  static defaultprops = {text: ' I am the default ' 

1  // Parent Component Commentlist 2 class Commentlist extends Component {  3  render () {  4      return (  5        <comment text= ' aaa '/> 6        <comment text= ' bbb '/> 7         <comment  /> 8     )  9   }

State understands:

State is mainly the component itself to control its own status, through SetState control, such as a switch has two states, on off, the first state of the component is off in code as This.state={status: ' Off '}, now want to click on the change ( SetState) Its own state, click on the component belongs to the component of its own behavior, click the switch after the change is their own state changes, the whole is their own behavior changed their state, this is the role of States.

Props vs states:

Props:

1. Immutable
2. Used to pass data down from your view controller (your top-level component)
3. Better performance, using it to pass data to subcomponents

State:

1. Should be managed in your view controller (your top-level component),
2. The variable
3. Bad performance.
4. Do not access it from a subassembly, but instead use props to pass it

Props and State cooperation:

Props and state can pass the state of the parent component to the child component

Reactjs-2-props vs State