javascript - 为什么当我关闭并重新打开 react 组件( Material 表)时会发生内存泄漏并渲染速度变慢？

Question

我有基本的学习 react 示例，​​我在我的一个组件中使用了 Material 表。每次我更改页面并重新打开它(卸载和安装组件)时，我的包含 Material 表的组件加载速度会更慢。我在下面分享我的代码。

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 }}
        />
    )
}

这个改变解决了我的问题，但我真的很想知道为什么会这样。当我在方法之外进行列定义时，为什么内存泄漏和渲染会减慢每个页面的更改速度。同时，当我进入方法时，发生了什么变化？

Answer 1

分析
material-table添加属性 column.tableData到您的columns 的每一列列表，然后有一个assignment这有效地做了类似的事情(见文件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 表中的错误。
看起来 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)"