相关疑难解决方法(0)

我们的应用程序使用无限滚动来导航异类项目的大型列表.有一些皱纹:

• 我们的用户通常拥有10,000个项目的列表,需要滚动3k +.
• 这些是丰富的项目,因此在浏览器性能变得不可接受之前,我们只能在DOM中使用几百个.
• 这些物品的高度各不相同.
• 这些项目可能包含图像,我们允许用户跳转到特定日期.这很棘手,因为用户可以跳转到列表中我们需要在视口上方加载图像的位置,这会在加载时推送内容.未能处理这意味着用户可能会跳转到某个日期,但随后会转移到更早的日期.

已知的不完整解决方案:

• https://github.com/guillaumervls/react-infinite-scroll - 这只是一个简单的"当我们触及底部时加载更多"组件.它不会剔除任何DOM,因此会死于数千个项目.

• http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html - 显示如何在顶部插入或插入底部时存储和恢复滚动位置,但不能同时插入.

我不是在寻找完整解决方案的代码(虽然那会很棒.)相反,我正在寻找"反应方式"来模拟这种情况.滚动位置是否状态？我应该跟踪什么状态来保留我在列表中的位置？当我在渲染的底部或顶部附近滚动时,我需要保持什么状态才能触发新的渲染？

我正在尝试为 React.js 实现无限滚动。一切工作正常，除了我希望能够使用窗口滚动条来激活无限滚动。目前的代码有 2 个滚动条（我只想要一个）。

代码来自 stackoverflow 回答这里，我阅读了他的完整答案，我尝试将高度设置为 100%，但这使得无限滚动不起作用。：Stackoverflow- 由 Aniket Jha 回答（最长的回答，有 4 票赞成）

• 当我以这种方式呈现时，会发生双滚动：

  <div>
  <First />
   <div ref="iScroll" style={{ height: "100vh", overflow: "auto"}}>
      <ul>
        {this.displayItems()}
      </ul>
      {this.state.loadingState ? <p className="loading"> loading More 
       Items..</p> : ""}
    </div>
  </div>
  

  Run Code Online (Sandbox Code Playgroud)

如果有帮助的话我有 Codepen 的链接

class Layout extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
      items: 30,
      loadingState: false
    };
  }

  componentDidMount() {
    this.refs.iScroll.addEventListener("scroll", () => {
      if (this.refs.iScroll.scrollTop + this.refs.iScroll.clientHeight >= this.refs.iScroll.scrollHeight - 20){
        this.loadMoreItems();
      }
    }); …

我有一个表，其中包含> 30行和> 50列。每行和每个单元格都是特定的React组件，因为您可以对其进行操作，并且它们会更改行为并根据更改的数据进行查找。

所以我的组件层次结构看起来像这样：

Grid -> Row -> Cell

我正在使用MobX来处理应用程序状态，当涉及到影响某些单元组件的状态更改时，它似乎会放慢一点。因为不是每个单元格和行都对用户可见（表是可滚动的），所以我认为只允许实际可见的React组件可能会提高性能。

我想知道是否可能存在现有组件，或者我将如何以高性能的方式创建这样的组件。

我也认识到，每次状态更改时，单元格和行都会重新呈现。可能与每个单元格和行组件都注入appStore有关。我如何告诉MobX仅应重新渲染那些已更改的组件？那有可能吗？

所以基本上我正在寻找这两种方式。