react长列表优化组件: react-virtualized，附完整demo

• 下载安装参考网址：https://github.com/bvaughn/react-virtualized
• 代码

App.js

import React, { Component, } from "react";
import "./App.css"
import { List, WindowScroller } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once
import OtherComponent from "./OtherComponent"
const list = [
  { name: 'test1', description: 'description1' },
  { name: 'test2', description: 'description2' },
  { name: 'test3', description: 'description3' },
  { name: 'test4', description: 'description4' },
  { name: 'test5', description: 'description5' },
  { name: 'test6', description: 'description6' },
  { name: 'test7', description: 'description7' }
];
class App extends Component {
  render() {
    const height = parseInt(document.body.clientHeight);
    const rowHeight = 120;
    const width = parseInt(document.body.clientWidth);
    const renderItem = ({ index, key, style }) => {
      return (
        

          
        
      )
    }
    return (
      

          
            {({ isScrolling, onChildScroll, scrollTop  }) => (
              
            )}
          
      
    )
  }
}
export default App;

OtherComponent.js

import React, { Component } from "react";
import { Table } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
class OtherComponent extends Component {
    render() {
        return (
            

                
                        
                            
                                懒加载
                            
                        
                    
                        
                            
                                {this.props.data.name}
                                

                                {this.props.data.description}
                            
                        
                    
            
        )
    }
}
export default OtherComponent;