React:表的高效重新呈现
React:表的高效重新呈现
提问于 2020-12-12 06:04:55
我有一个react + flask网站。前端创建到后端的socketio连接，之后后端定期发送数据供前端更新。数据是一个单独的字典。在每次更新时，我必须在UI中更新一个表。
下面是一个伪代码：
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} />
}问题是表格只有1个单元格的变化。但我还是渲染了整个表。渲染速度足够快，但整个UI在渲染完成后变得没有响应。当我在短时间内获得20-30个单元的更新时，UI可能会在2-3秒内变得没有响应，这是很明显的。
我应该如何以一种更有效的方式来呈现表格？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-12 06:33:31
您可以将实际的"table_row“功能提取为单独的组件，并将其包装在React.memo中。因此，只有当您传递的道具发生更改时，才会重新渲染每一行。
请确保只将原始数据作为props传递，如果传入任何回调函数，请确保首先将这些函数包装在React.useCallback中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65259239
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号