javascript - 使用 React 动态创建大表

Question

我正在尝试在 React 中编写代码，以便动态地(即，在事先不知道数据的情况下)从通过输入表单上传的 csv 文件开始渲染大表(例如 10.000 行 X 350 列)。

我编写了您可以在下面找到的代码。它适用于有限的表，例如2000 行 x 350 列。使用目标表 (10.000 x 350)，Chrome 停止执行，告诉我“在潜在内存不足崩溃之前暂停”，之后应用程序崩溃。 Microsoft Edge 也无法运行该应用程序。有没有办法改进我的代码以避免这种情况？

提前非常感谢您!

    populateRows() {
        function populateCols(cols, lineNumber) {
            let result = [];
            for(let i=0; i<cols.length; i++) {
                if(lineNumber === 0){
                    result.push(<th key={lineNumber + '_' + i}>{cols[i]}</th>);
                }
                else {
                    result.push(<td key={lineNumber + '_' + i}>{cols[i]}</td>);
                }
            }
            return result;
        }

        function populateBody(lines) {
            const result = [];
            for(let line = 1; line < lines.length; line++){
                result.push(<tr key={'line_' + line}>{populateCols(lines[line].split(','), line)}</tr>);
            }
            return result;
        }

        let result = [];
        result.push(<thead key={"thead"}><tr key={'headRow'}>{populateCols(this.props.cols, 0)}</tr></thead>);

        result.push(<tbody key={"tbody"}>{populateBody(this.props.lines)}</tbody>);

        return result;
    }

    render() {

        return (
            <div>
                <p className={'noBoardersP'}><b> {this.props.caption} </b></p>
                <div className="tableDiv">
                    <table>
                        {this.populateRows()}
                    </table>
                </div>
            </div>
        );
    }

Answer 1

React virtualized正是出于这个原因而创建的。

https://github.com/bvaughn/react-virtualized

以及一个工作示例

https://bvaughn.github.io/react-virtualized/#/components/List