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

는 바이올린 : https://jsfiddle.net/omerts/8r3dh6hw/는

우리는이 돌보는에 대한 상위 구성 요소를 만든

은 (로더는 이미지 때문에 예를 작동 변경) :

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

사용법 :

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

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

바이올린 :

당신이 당신의 구성 요소에서 다른 상태이나 소품에 기반을 계산할 수 있습니다 :은 "의 반응을 생각"문서에서 https://jsfiddle.net/omerts/4edgbhmz/

? 그렇다면 그것은 국가가 아닙니다.