Reactでコンポーネントのレンダリングを遅延させるための推奨デザインパターンは何ですか？

Question

私は現在、UIをレンダリングするのに必要なデータがあれば、状態readyToRenderをfalseに初期化し、trueに設定してコンポーネントのレンダリングを延期しています。

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

が、これはこの問題のために活用するための正しいパターンですかこれを解決する良い方法があります：機能をレンダリングマイ

は何かのように見えますか？
関連の質問：すべての

• Delayed rendering of React components
• React delayed rendering

Answer 1

まず、我々は代わりにthis.stateでそれを保持する、データから "ロードされた" 状態を導出してみてください。データは利用できませんが、スピナーを表示しますが、何も表示しない場合もあります。例えばので

：

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

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

はフィドル：

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} /> 
    } 
} 

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

我々はこのの世話のための高次成分を（ローダイメージは例が動作するように変更）も作成しました

使用法：

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

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

フィドル：

はあなたのコンポーネント内の他の状態や小道具に基づいて、それを計算することができます：「で反応考える」のdocからhttps://jsfiddle.net/omerts/4edgbhmz/

？もしそうなら、それは国家ではない。