在具有大数据集的组件之间滑动(反应)

时间:2019-05-28 11:10:18

标签: reactjs

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

我已经制作了一个组件,可以从一个地方获取数据,并且可以从App.js中调用该组件,所以现在,如果我以这种方式实现它,则可以复制该组件或从另一个地方获取数据。

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

我尝试使用 react-swipeable-views 。这篇文章中提供了代码。这似乎是一个简单的解决方案,但是我不确定这样做是否是个好主意。我想使用大数据集会很繁重吗?如果我了解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;

1 个答案:

答案 0 :(得分:0)

我以前没有使用过它,但是在看文档时,使用react-swipeable-views应该没问题,因为它“快速呈现第一张幻灯片,然后延迟加载其他幻灯片”。 (来自https://github.com/oliviertassinari/react-swipeable-views)。此外,您可以自定义呈现当前显示的幻灯片之前和之后的幻灯片数量(请参见https://react-swipeable-views.com/api/api/#virtualize)。

追赶一些反应概念(https://reactjs.org/docs/introducing-jsx.html)可能也是个好主意。 React不会“隐藏”任何组件,它只会将您选择的组件呈现给DOM,并更新使DOM反映您的状态所需的内容。因此,例如,如果您有多个页面(p1,p2,p3),每个页面都呈现一个组件(c1,c2,c3),而在页面p1上,则仅将组件c1呈现给DOM。