认识

2024年04月15日

柏拉文

越努力，越幸运

一、认识

二、方案

三、问题

3.1 表格组件的性能瓶颈主要在哪里?

渲染大量 DOM
频繁的更新渲染,如选中行状态改变引起整个表格重新渲染

3.2 如何优化表格组件的渲染性能?

只渲染必要的列

const columnsToRender = columns.filter(column => column.shouldRender);

return (
    <table>
        <thead>
        <tr>
            {columnsToRender.map(column => (
            <th key={column.key}>{column.title}</th>
            ))}
        </tr>
        </thead>
        <tbody>
        {data.map(row => (
            <tr key={row.id}>
            {columnsToRender.map(column => (
                <td key={column.key}>{row[column.key]}</td>
            ))}
            </tr>
        ))}
        </tbody>
    </table>
);

细粒度更新，只更新变化行/列。在React中，可以使用React.memo或者shouldComponentUpdate来避免不必要的重渲染：

function Row({ data, columns }) {
    return (
        <tr>
        {columns.map(column => (
            <Cell key={column.key} data={data[column.key]} />
        ))}
        </tr>
    );
}

const areEqual = (prevProps, nextProps) => {
    return prevProps.data === nextProps.data && prevProps.columns === nextProps.columns;
};

export default React.memo(Row, areEqual);

采用虚拟化技术，只渲染可视区的行。可以使用第三方库如react-window或者react-virtualized来实现：

import { FixedSizeList as List } from "react-window";

function Table({ data, columns }) {
    const Row = ({ index, style }) => (
        <div style={style}>
        {columns.map(column => (
            <Cell key={column.key} data={data[index][column.key]} />
        ))}
        </div>
    );

    return (
        <List
        height={500}
        itemCount={data.length}
        itemSize={35}
        >
        {Row}
        </List>
    );
}

使用Web Workers来处理数据处理或计算密集型任务：

// 创建一个新的 worker
const worker = new Worker('worker.js');

// 向 worker 发送数据
worker.postMessage(data);

// 监听 worker 的消息
worker.addEventListener('message', (event) => {
// 更新表格数据
updateTable(event.data);
});

在worker.js中：

self.addEventListener('message', (event) => {
// 处理数据
const processedData = processData(event.data);

// 发送处理后的数据
self.postMessage(processedData);
});

一、认识​

二、方案​

三、问题​

3.1 表格组件的性能瓶颈主要在哪里?​

3.2 如何优化表格组件的渲染性能?​

一、认识

二、方案

三、问题

3.1 表格组件的性能瓶颈主要在哪里?

3.2 如何优化表格组件的渲染性能?