Data flow in React: parent-child-parent, or parent-child?

user_2521785 0
Viewed 235

Given the following code, I'm wondering who is rendering the actual message. Since the flow is supposed to go from parent component, here ScreenOne, to child component, Heading, is it then that parent component sends down the message to Heading who returns the html element to the parent, and parent then renders it the actual message as the final stop? So in essence, it's going from parent to child, and back to parent?

// Parent 
export default class ScreenOne extends React.Component {
  render () {
    return (
     <View>
         <Heading message={'Custom Heading for Screen One'}/>
     </View>
    )
  }
}

// Child component
export default class Heading extends React.Component {
  render () {
    return (
      <View>
        <Text>{this.props.message}</Text>
      </View>
    )
  }
}
Heading.propTypes = {
  message: PropTypes.string
}
Heading.defaultProps = {
  message: 'Heading One'
}
reactjs
1 Answers

React uses a virtual DOM to render components. When the <ScreenOne> is rendered and React sees a <Heading> tag, it creates an instance of the Heading class and passes down the props. When that component is rendered and mounted into the DOM, React updates its children to look like the structure returned by render.

user_81394790
Related