Question

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

我正在寻找最佳做法，但也许使用布尔值，setTimeout()是唯一的方法。 THX。

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 - 延迟重子组件渲染

3 个答案: