Was ist das bevorzugte Entwurfsmuster, um das Rendern einer Komponente in React zu verzögern?

Question

Ich verzögere derzeit das Rendern einer Komponente, indem ich einen Zustand readyToRender auf false initialisiere und ihn auf true setze, sobald ich die Daten habe, die zum Rendern der UI benötigt werden.

meine Funktion machen sieht ungefähr so ​​aus:

if (this.state.readyToRender) { 
    return (
    // render component 
)} else { 
    return false; // don't render component 
} 

Ist dies das richtige Muster für dieses Problem zu verwenden, oder gibt es einen besseren Weg, dies zu lösen?
Verwandte Fragen:

• Delayed rendering of React components
• React delayed rendering

Answer 1

Zunächst einmal versuchen wir, die "geladen" Zustand aus den Daten abzuleiten, statt es in this.state halten. Während Daten nicht verfügbar sind, zeigen wir einen Kreisel, aber Sie können auch nichts zeigen.

So zum Beispiel:

const TextShower = (props) => { 
    if (props.text) { 
    return <div>{props.text}</div> 
    } 

    return <img src='https://s31.postimg.org/g3992fx7v/477.gif' /> 
} 

Fiddle: https://jsfiddle.net/omerts/8r3dh6hw/

Wir haben auch eine höherwertige Komponente dieser für die Betreuung erstellt (loader Bild geändert, so das Beispiel funktioniert):

const loaderComponent = (ComposedComponent, predicate) => { 
    return (props) => { 
    const isLoading = predicate && predicate(props) 

    if (isLoading) {  
     return <div className='loading-data'> 
       <img src='https://s32.postimg.org/8w18tbrlx/477_1.gif' /> 
      </div> 
    } 

    return <ComposedComponent {...props} /> 
    } 
} 

Verwendung:

const TextShower = (props) => { 
    return <div>{props.text}</div> 
} 

const LoaderTextShower = loaderComponent(TextShower, 
             (props) => !props.text) 

Fiddle: https://jsfiddle.net/omerts/4edgbhmz/

Aus dem "Denken in React" doc:

Können Sie es berechnen, basierend auf jedem anderen Staat oder Requisiten in Ihrer Komponente? Wenn ja, ist es kein Staat.