反応遅延重いサブコンポーネントレンダリング

Question

私はリアクターとリアクタールーターを使用していますが、いくつかのページでは、大きなリストをページの（サブコンポーネントとして）レンダリングしています。ページを変更するリンクをクリックすると、すべてのサブコンポーネントがレンダリングされるのを待ちます。これは、クリックとビジュアルフィードバックの間の遅延を意味します。いくつかのサブコンポーネントがレンダリングされるのを待たない簡単な方法はありますか？

ベストプラクティスを探していますが、ブール値を使用していて、setTimeout()が唯一の方法です。どうも。

Answer 1

コンポーネントの大きなリストがある場合、それらのコンポーネントのすべてが同時に表示されないことがよくあります。 React Virtualizedを使用すると、実際に表示されるコンポーネントだけをレンダリングできます。

Answer 2

は、以下のコードを確認してください：

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>

Answer 3

を、私は同じ課題を持っていました。最後に私はこの素敵なライブラリを発見してくれました。https://github.com/seatgeek/react-infinite