滑动浏览具有大数据集的组件（React）

Question

我正在构建一个 React 应用程序，该应用程序从多个不同位置的温度传感器获取大量数据并使用 chart.js 显示数据。

我制作了一个从一个地方获取数据的组件，该组件是从 App.js 调用的，所以现在我可以复制这个组件/或从另一个地方获取数据，如果我以这种方式实现的话。

下一步是找到一种方法来浏览这些组件。我不知道该用什么或者我将如何解决这个问题，所以我正在寻找解决这个问题的想法。

我试过使用 react-swipeable-views。 post 中提供了代码。这似乎是一个简单的解决方案，但我不确定这样做是否是个好主意。我想这对大数据集来说会很重吗？如果我理解 React 的工作方式，它会从所有组件中提取数据到浏览器，然后隐藏它直到显示出来？

我也看过这篇文章：https://coursework.vschool.io/react-transitions-with-react-transition-group/ 这里使用了react-transition-group，但是我不确定这里如何实现滑动部分，因为本文没有讨论。

关于如何解决这个问题有什么想法吗？

import React, {Component} from 'react';
import Test from './Test';
import SwipeableViews from 'react-swipeable-views';



const styles = {
  slide: {
    padding: 15,
    minHeight: 800,
    color: '#fff',
  },
  slide1: {
    background: '#FEA900',
  },
  slide2: {
    background: '#B3DC4A',
  },
  slide3: {
    background: '#6AC0FF',
  },
};


class App extends React.Component{

  constructor(){
    super();
    this.state={
      foo: 'bar'
    }
  }
}


render(){
   return(
    <div className="App">

      <SwipeableViews enableMouseEvents>
          <div style={Object.assign({}, styles.slide, styles.slide1)}>
            slide n°1

            <Test />     // <-- This would be a component with large data sets

          </div>
          <div style={Object.assign({}, styles.slide, styles.slide2)}>
            slide n°2
          </div>
          <div style={Object.assign({}, styles.slide, styles.slide3)}>
            slide n°3
          </div>
      </SwipeableViews>

    </div>
  )
}

export default App;

Answer 1

我以前没有用过它，但是查看文档，使用 react-swipeable-views 应该没问题，因为它 "quickly renders the first slide, then lazy-loads the others."（来自 https://github.com/oliviertassinari/react-swipeable-views). Furthermore you can customize how many slides before and after the currently displayed one are being rendered (see https://react-swipeable-views.com/api/api/#virtualize）。

此外，了解一些 React 概念可能是个好主意 (https://reactjs.org/docs/introducing-jsx.html)。 React 不会 "hide" 任何组件，它只会将您选择的组件呈现给 DOM 并更新获取 DOM 所需的内容以反映您的状态。因此，例如，如果您有多个页面（p1、p2、p3），每个页面渲染一个组件（c1、c2、c3），而在页面 p1 上时，只有组件 c1 会渲染到 DOM。

滑动浏览具有大数据集的组件（React）

Swipe through components with big data sets (React)

reactjs