React - 延迟繁重的子组件渲染

Question

我正在使用 React 和 React Router，在某些页面上，我呈现了一些页面的大列表（作为子组件）。单击 link 更改页面时，它会等待所有子组件呈现，这意味着单击和视觉反馈之间存在延迟。有没有一种简单的方法可以不等待某些子组件被渲染？

我正在寻找最佳实践，但也许使用布尔值和 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

React - 延迟繁重的子组件渲染

React - delay heavy sub components rendering

performance

frontend

reactjs

react-router