陣營 - 延遲重子組件渲染

我使用的反應，並做出反應路由器，並在一些網頁上，我有一些大名單的網頁渲染（作爲子組件）。點擊鏈接更改頁面時，會等待所有子組件被渲染，這意味着點擊和視覺反饋之間存在延遲。有沒有一種簡單的方法不等待一些子組件被渲染？陣營 - 延遲重子組件渲染

我正在尋找最好的做法，但也許使用布爾和setTimeout()是唯一的辦法。謝謝。

來源

2016-08-24 Cohars

我將手動避免延遲渲染，你可能嘗試像懶加載？所以如果它們在視圖中只顯示列表中的項目？或類似的做法 – Geraint

當你有分量的大名單，你常常看不到他們都在同一時間。您可以使用React Virtualized實際僅渲染可見組件。

來源

2016-08-24 11:46:48

陣營虛擬化似乎是我的需求有點大材小用其實... https://github.com/onefinestay/react-lazy-render似乎只是罰款，但已經過時了：/ – Cohars

檢查下面的代碼：

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>

來源

2016-08-24 11:51:15

好了，這是完全一樣使用一個setTimeout，加上，我不是componentDidMount中setState的忠實粉絲 – Cohars

我有同樣的挑戰。最後，我發現了這個奇妙的圖書館，這樣做的伎倆對我來說：https://github.com/seatgeek/react-infinite

來源

2017-02-18 22:53:37

陣營 - 延遲重子組件渲染

回答

相關問題