react-virtualized 是否在功能组件内工作？答案

【问题标题】：Does react-virtualized work inside a functional component?react-virtualized 是否在功能组件内工作？
【发布时间】：2017-07-26 13:12:21
【问题描述】：

我问是因为我看到的例子都是 es6 类的。

并且：我将我的 es6 类重构为一个函数式组件。现在不再出现任何行。而且也没有错误。似乎行渲染器不再渲染任何行。

【问题讨论】：

是的，react-virtualized 在类或函数组件中工作。如果您链接到显示一些代码和您描述的问题的 Plnkr，您可能会更好地获得针对您特定情况的帮助。
感谢@brianvaughn，那我一定把我的代码搞砸了。非常感谢这个伟大的工具！

标签： react-virtualized

【解决方案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

【讨论】：

很好的回应，如果您需要提供 keyMapper 并且 keyMapper 取决于功能组件的道具，有什么想法可以解决吗？请注意，它不需要每次都重新创建缓存，因为这可能很昂贵，并且会导致您将缓存传递到的任何子组件重新渲染，这可能是不必要的。
从未使用过 keyMapper，但如果需要更具体的功能，也许您也可以拥有自己的缓存系统。