react-virtualized在功能组件中工作吗？

Question

我之所以问这个问题，是因为我看到的示例都在es6类中。

并且:我将我的es6类重构为一个功能组件。现在不再显示任何行。而且也没有错误。似乎行渲染器只是简单地不再渲染任何行。

Answer 1

可以，您可以将函数组件与react-virtualized一起使用

它的性能和类组件一样好吗？我不知道，请在评论中告诉我;)

示例：

import React from 'react'
import {Grid, Typography} from '@material-ui/core'
import PackageItem from './PackageItem'
import {PackagesByCategory} from '../functions/src/types'
import {makeStyles} from '@material-ui/core/styles'
import {WindowScroller, AutoSizer, List, ListRowRenderer, CellMeasurer, CellMeasurerCache} from 'react-virtualized'


const useStyles = makeStyles(theme => ({
    container: {
        minHeight: "80vh",
        width: "100%"
    },
    title: {
        marginTop: 64,
    },
}))

const cache = new CellMeasurerCache({
    defaultHeight: 60,
    fixedWidth: true
});


const PackageCategoriesList = ({packagesByCategories}: PackageCategoriesList) => {
    const classes = useStyles()

    if(!packagesByCategories) {
        return <></>
    }

    const rowRender: ListRowRenderer = ({index, key, style, parent}) => {
        const packageByCategory = packagesByCategories[index]

        return <CellMeasurer
            cache={cache}
            columnIndex={0}
            key={key}
            overscanRowCount={10}
            parent={parent}
            rowIndex={index}
        >
            <Grid item key={key} style={style}>
                    <Typography variant="h1" className={classes.title}>
                        {packageByCategory.category.name}
                    </Typography>
                </Grid>
        </CellMeasurer>
    }

    return <div className={classes.container}>
        <WindowScroller
            scrollElement={window}>
            {({height, isScrolling, registerChild, onChildScroll, scrollTop}) => (
                <div className={classes.list}>
                    {console.log("re der list" , height, isScrolling, scrollTop)}
                    <AutoSizer disableHeight>
                        {({width}) => (
                            <div ref={registerChild}>
                                <List
                                    autoHeight
                                    height={height}
                                    isScrolling={isScrolling}
                                    onScroll={onChildScroll}
                                    overscanRowCount={2}
                                    rowCount={packagesByCategories.length}
                                    rowHeight={cache.rowHeight}
                                    rowRenderer={rowRender}
                                    scrollTop={scrollTop}
                                    width={width}
                                />
                            </div>
                        )}
                    </AutoSizer>
                </div>
            )}
        </WindowScroller>

    </div>
}

export default PackageCategoriesList