阵营 - 延迟重子组件渲染

我使用的反应，并做出反应路由器，并在一些网页上，我有一些大名单的网页渲染（作为子组件）。点击链接更改页面时，会等待所有子组件被渲染，这意味着点击和视觉反馈之间存在延迟。有没有一种简单的方法不等待一些子组件被渲染？阵营 - 延迟重子组件渲染

我正在寻找最好的做法，但也许使用布尔和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

阵营 - 延迟重子组件渲染

回答

相关问题