Reactjs-2-props vs State

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.