React table重新渲染性能

Question

我有一个显示大约200行/ 8列的表（一个字段显示子行）。它的父组件有2个单选按钮，用于过滤表数据，使得2个子集中没有重叠数据。我遇到的问题是，无论何时重新呈现表，它都会挂起几秒钟。有什么方法可以让我的表现更好，还是我需要研究一下像react-virtualized这样的东西？感谢

var TableList = function (props) {
    var data = props.data;
    var headers = Object.keys(data[0]);

    return (
        React.DOM.table({ className: 'u-full-width' },
            React.DOM.thead(null,
                React.DOM.tr(null,
                    headers.map(function (header, i) {
                        return React.DOM.th({ key: i }, header);
                    })
                )
            ),
            React.DOM.tbody(null,
                data.map(function (record, i) {
                    var cols = headers.map(function (header, i) {
                        if (header === "expand1" || header === "expand2") {
                            return React.DOM.td({ key: i },
                                record[header].map(function (obj, i) {
                                    return (
                                        React.DOM.div({ className: 'row', key: i },
                                            React.DOM.div({ className: 'two columns', style: { textAlign: 'left' } }, 'item: ' + i ),
                                            React.DOM.div({ className: 'eight columns', style: { textAlign: 'center' } }, obj.name),
                                            React.DOM.div({ className: 'two columns', style: { textAlign: 'right' } }, '(' + obj.percent ' %)')
                                        )
                                    );
                                })
                            );
                        }
                        return React.DOM.td({ key: i }, record[header] || "-");
                    });
                    return React.DOM.tr({ key: i }, cols);
                })
            )
        )
    )
};