页面与之交互后立即反应惰性

Question

我正在建立一个使用实时聊天的React网站，并使用react-livechat软件包。我已将其与react-lazyload插件配对，以防止它对页面加载时间产生不利影响。

我现在正在尝试一种方法，以便在与页面互动后立即加载livechat组件。当前，仅在页面滚动到组件的设置距离（默认情况下是页面的页脚）内时才呈现。这确实可以防止页面加载受到影响，但是需要用户在加载组件之前滚动一定距离。理想情况下，它将与页面进行任何交互加载。

import React, { Component } from 'react';

import LiveChat from 'react-livechat';
import LazyLoad from 'react-lazyload';

class App extends Component {


  render() {
    return (
      <div className="App">
        ...
        <LazyLoad once>
          <LiveChat license={'xxxxxx'} />
        </LazyLoad>
        ...
      </div>
    );
  };
}

export default App;

Answer 1

我设法通过一种变通方法来解决此问题，并在一段时间后加载了组件。我发现10秒钟很好地确保了即使在移动设备上，所有内容都可以完全渲染。

// App.js
import React, { Component } from 'react';

import LiveChat from 'react-livechat';

class App extends Component {

  componentDidMount() {
    setTimeout(() => this.setState({loadLiveChat: true}), 10000);
  }
  render() {
    return (
      <div className="App">
        ...
        <LazyLiveChat loadChat={this.state.loadLiveChat} />
        ...
      </div>
    );
  };
}

export default App;

// lazyLiveChat.js
import React, { Component } from 'react';
import LiveChat from 'react-livechat';

class LazyLiveChat extends Component {

  render() {
    if (this.props.loadChat) {
      return (
        <LiveChat license={1169711} />
      );
    }
    return null;
  }
}

export default LazyLiveChat;