Detailed explanation of React's callback rendering mode

1. A simple example

1. Parent component

<Twitter username='tylermcginnis33'>
 {(user) => user === null
  ? <Loading />
  : <Badge info={user} />}
</Twitter>

2. Subcomponent framework

import React, { Component, PropTypes } from 'react'
import fetchUser from 'twitter'
// fetchUser take in a username returns a promise
// which will resolve with that username's data.
class Twitter extends Component {
 // finish this
}

3. Specific implementation of subcomponents

import React, { Component, PropTypes } from 'react';
import fetchUser from 'twitter';
class Twitter extends Component {
 state = {
  user: null,
 }
  static propTypes = {
  username: ,
 }
  componentDidMount() {
  fetchUser().then(user => ({user}));
 }
  render() {
  return ();
 }
}

The advantage of this pattern is that it decouples the parent component from the child component. The parent component can directly access the internal state of the child component without passing it through Props, so that the parent component can more conveniently control the UI interface displayed by the child component. For example, the product manager asked us to replace the originally displayed Badge with a Profile, and we can easily modify the callback function:

<Twitter username='tylermcginnis33'>
 {(user) => user === null
  ? <Loading />
  : <Profile info={user} />}
</Twitter>

This is the end of this article about detailed explanation of React's callback rendering mode. For more related React callback rendering content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!