有效呈现大型列表和表格数据的React组件
JS当中直接操作DOM，会导致性能严重下降，
所以渲染长列表（也就是大量DOM），会导致浏览器卡顿严重，甚至有可能出现假死状态

https://bvaughn.github.io/react-virtualized/#/components/List
长列表文档 https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md

  1. yarn add react-virtualized
  1. import 'react-virtualized/styles.css';
  3. import {Column, Table} from 'react-virtualized';
  4. import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
  5. import List from 'react-virtualized/dist/commonjs/List';
  7. <List {...listProps} sortBy={sortBy} />

MultiGrid

  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. import moment from 'moment';
  5. import {MultiGrid} from 'react-virtualized';
  6. import styles from "./MultiGrid/MultiGrid.example.css";
  7. import data from './_mockData'
  9. const subChild = () => {
  10.   const arr = ['count', 'max']
  11.   return arr.map(item => <div key={item} className='flex-1'>{item}</div>)
  12. }
  14. // 固定表头
  15. function getThead(columnIndex) {
  16.   const { values } = data[0] || {};
  17.   if(columnIndex < 2) {
  18.     const arr = ['INFO', '机刷']
  19.     return arr[columnIndex]
  20.   };
  22.   if(values) {
  23.     const thead = values.map((item, i) => {
  24.       const [time] = item;
  25.       return moment(time).format('HH:mm');
  26.     });
  27.     return (
  28.       <>
  29.         <div style={{borderBottom: '1px solid #ddd'}}>{thead[columnIndex]}</div>
  30.         <div className="flex">{subChild()}</div>
  31.       </>
  32.     );
  33.   }
  34. }
  36. // 固定左侧的列
  37. function getColumns(columnIndex, rowIndex) {
  38.   const {keys} = data[rowIndex-1];
  39.   if(columnIndex > 1 ) return;
  40.   return keys[columnIndex]
  41. }
  43. // 表格的内容
  44. function getTbody(columnIndex, rowIndex) {
  45.   // rows
  46.   const {values} = data[rowIndex-1];
  47.   const columns = values[columnIndex - 2];
  48.   console.log('getTbody', columnIndex, rowIndex, columns);
  49.   return columns.map((item, i) => {
  50.     console.log('item', item)
  51.     if(i<3) return null
  52.     return <div className='flex-1'>{item ? item : '-'}</div>
  53.   });
  54. }
  57. function Index(props) {
  59.   /**
  60.    *
  61.    * @param columnIndex
  62.    * @param key 16-1
  63.    * @param rowIndex
  64.    * @param style {height: 40, left: 0, position: "absolute", top: 640, width: 75}
  65.    * @returns {JSX.Element}
  66.    */
  67.   function cellRenderer({columnIndex, key, rowIndex, style}) {
  68.     if(rowIndex === 0) {
  69.       // const width = columnIndex < 2 ? 60 :  style.width;
  70.       console.log('style', style)
  71.       return (
  72.         <div className={styles.Cell} key={key} style={style}>
  73.           {getThead(columnIndex)}
  74.         </div>
  75.       )
  76.     }
  78.     // 固定左侧2列
  79.     if(columnIndex < 2) {
  80.       return (
  81.         <div className={styles.Cell} key={key} style={style}>
  82.           {getColumns(columnIndex, rowIndex)}, {rowIndex}
  83.         </div>
  84.       );
  85.     }
  87.     // console.log('cell', columnIndex, rowIndex, 'key', key, style)
  88.     return (
  89.       <div className={styles.Cell} key={key} style={style}>
  90.         <div className="flex">{getTbody(columnIndex, rowIndex)}</div>
  91.       </div>
  92.     );
  93.   }
  95.   return (
  96.     <div style={{width: '80%'}}>
  97.       <MultiGrid
  98.         cellRenderer={cellRenderer} // 渲染的表格内容
  99.         columnWidth={240} // 每列的宽度
  100.         columnCount={182} // 多少列，如果有固定列，需要加上固定列
  101.         fixedRowCount={1} // 固定的表头行
  102.         fixedColumnCount={2} // 左侧固定的的列
  103.         width={1200} // Table的宽度
  104.         height={214} // Table的高度 + 滚动条的高度 14px
  105.         styleTopRightGrid={{height: 80}}
  106.         rowHeight={40} // 一行的高度
  107.         rowCount={5} // 多少行
  108.         hideTopRightGridScrollbar={true}
  109.       />
  110.     </div>
  111.   );
  112. }
  114. export default Index;