반응 - 무거운 하위 구성 요소 렌더링 지연

반응 - 무거운 하위 구성 요소 렌더링 지연

라우터 반응 및 반응 라우터를 사용하고 있으며 일부 페이지에는 페이지의 큰 목록(하위 구성요소)이 렌더링되어 있다.페이지를 변경하기 위해 링크를 클릭하면 모든 하위 구성요소가 렌더링될 때까지 기다리며, 이는 클릭과 시각적 피드백 사이의 지연을 의미한다.일부 하위 구성요소가 렌더링되기를 기다리지 않는 간단한 방법이 있는가?

최선의 방법을 찾고 있지만 부울과 부울로setTimeout()유일한 방법이야고마워

구성 요소의 목록이 크면 모든 구성 요소를 동시에 볼 수 없는 경우가 많다.가상화된 대응 기능을 사용하여 실제로 가시적인 구성 요소만 렌더링할 수 있다.

아래 코드를 확인하십시오.

const LightComponent = () => <div>LightComponent</div>
const HeavyComponent = () => <div>HeavyComponent</div>

class App extends React.Component {

  constructor(props) {
    super();
    this.state = { shouldRenderHeavyComponent: false };
  }
  
  componentDidMount() {
    this.setState({ shouldRenderHeavyComponent: true });
  }
  
  render() {
    console.log("Render", this.state.shouldRenderHeavyComponent);
    return (
      <div>
        <LightComponent/>
        { this.state.shouldRenderHeavyComponent && <HeavyComponent/> }
      </div>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

나도 같은 도전이 있었다.마침내 나는 이 멋진 도서관을 발견했고, 나를 위해 속임수를 썼다: https://github.com/seatgeek/react-infinite

참조URL: https://stackoverflow.com/questions/39122061/react-delay-heavy-sub-components-rendering