javascript - 为什么当我关闭并重新打开反应组件(材料表)时会发生内存泄漏并渲染速度变慢?
问题描述
我有基本的学习反应示例,我在我的一个组件中使用了材料表。每次我更改页面并重新打开它(卸载和安装组件)时,我的包含材料表的组件加载速度会更慢。我在下面分享我的代码。
import MaterialTable from 'material-table';
const columns = [
{ title: 'Id', field: 'id', hidden: true },
{ title: 'Username', field: 'username' },
{ title: 'Name', field: 'name' },
{ title: 'Phone', field: 'phone'}
];
const tableData = [
{
id: 1,
username: "User-1",
name: "name-1",
phone: "555 444 33 22"
},
{
id: 2,
username: "User-2",
name: "name-2",
phone: "111 222 33 44"
},
{
id: 3,
username: "User-3",
name: "name-3",
phone: "999 999 99 99"
}
];
const MTable = () => {
return (
<MaterialTable
title="Basic Search Preview"
columns={columns}
data={tableData}
options={{search: true }}
/>
)
}
export default MTable
经过长时间的搜索,我没有找到任何解决方案,经过长时间的尝试,我只是更改了列定义的位置,如下所示。
const MTable = () => {
const columns = [
{ title: 'Id', field: 'id', hidden: true },
{ title: 'Username', field: 'username' },
{ title: 'Name', field: 'name' },
{ title: 'Phone', field: 'phone'}
];
return (
<MaterialTable
title="Basic Search Preview"
columns={columns}
data={tableData}
options={{search: true }}
/>
)
}
这个改变解决了我的问题,但我真的很想知道为什么会这样。当我在方法之外进行列定义时,为什么内存泄漏和渲染会减慢每个页面的更改速度。同时,当我进入方法时,发生了什么变化?
解决方案
分析
material-tablecolumn.tableData
为列表的每一列添加一个属性columns
,然后有一个分配可以有效地执行类似的操作(请参阅文件data-manager.js):
column[0].tableData.width = "calc(" + ... +
column[0].tableData.width + ... +
column[1].tableData.width + ... + ")"
column[1].tableData.width = "calc(" + ...
...
因为列在全局范围内并且不会在每次卸载时被销毁,这让字符串tableData.width
呈指数增长。我猜它所花费的时间越来越长来自这些越来越多的嵌套“calc()”调用。
结论
我犹豫将其称为材料表中的错误。
看起来 material-table 期望在每次渲染时都创建列(而不是持久化)。很公平,但是对于习惯于在React中工作的人,我至少会称这种意外行为,并且文档中应该对此有警告。我也认为即使这样也可以万无一失地实施。(如果有人不同意,我想在评论中阅读原因)
例子
第一次安装组件tableData.width
是:
calc((100% - (0px +
calc((100% - (0px)) / 3) +
calc((100% - (0px)) / 3) +
calc((100% - (0px)) / 3)
)) / 3)
卸载和第二次安装后,宽度tableData.width
为:
calc((100% - (0px +
calc((100% - (0px +
calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) +
calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) +
calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3)
)) / 3) +
calc((100% - (0px +
calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) +
calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) +
calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3)
)) / 3) +
calc((100% - (0px +
calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) +
calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) +
calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3)
)) / 3)
)) / 3)"
推荐阅读
- ssl - 使用 Linux 工具/命令验证开放连接的安全协议版本 (TLS)?
- python - 在给定权重和偏差的情况下使用 numpy 进行隐藏层输出
- postgresql - 在 postgresql 9.6 中创建同时被其他事务阻塞的索引
- html - 为什么这个悬停不会触发文本动画?
- nao-robot - 有没有办法改变 Pepper 在 Autonomous Life 中所说的内容?
- c++ - getline() 无法正确读取重音字符
- ocr - 谷歌云视觉 OCR 多次读取同一个字母
- javascript - 将类添加到与标签文本匹配的父 div
- rxjs6 - 在 RxJS 6 管道中使用 forkJoin 作为 lettable 运算符
- openedge - 显示动态字段数