Question

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

我编写了可以在下面找到的代码。它适用于有限的表格，例如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 Table库与分页一起使用。有了它，您可以渲染尽可能多的行，但一次最多可见100行。

Answer 2

反应虚拟化就是出于这个确切原因。

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

还有一个可行的例子

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

用react动态创建大表

2 个答案: