React：表格的高效重新渲染

Question

我有一个 React + Flask 网站。前端创建到后端的 socketio 连接，之后后端定期发送数据供前端更新。数据是一个字典。在每次更新时，我都必须在 UI.

中更新 table

这是一个伪代码：

function Table ({data}) {
    const [dataTable, setDataTable] = useState(data);
    
    useEffect(() => {setDataTable(data)}, [data]);
    
    const createTable = () => {...};
    
    return createTable();

}

const createSocket = () => {...}

function Main() {
    const [state, setState] = useState(null);
    const socket = useRef(null);
    
    socket.current = createSocket();
    socket.current.on('state-update', (msg) => {setState(msg)});
    
    
    return <Table data={state.tableData} />
}

问题是 table 仅更改在 1 个单元格中。但是我还是渲染了整个table。渲染速度足够快，但完成后整个 UI 变得没有响应。当我在短时间内获得 20-30 个单元格更新时，UI 可能会在 2-3 秒内无响应，这很明显。

我应该如何以更有效的方式渲染 table？

Answer 1

您可以将实际的“table_row”功能提取为单独的组件并将其包装在 React.memo 中。因此，只有当您传递的道具发生变化时，每一行才会被重新渲染。

确保只传递原始数据作为道具，如果传递任何回调函数，请确保首先将它们包装在 React.useCallback 中。

React：表格的高效重新渲染

React: efficient re-render of tables

render

flask

reactjs

flask-socketio