背景

使用的react、antd design pro中的表格组件EditableProTable，如果每一行的编辑功能，都开设的话，性能很拉胯。

一、原来功能：

默认所有父级节点默认展开。
所有行，默认开始编辑模式，显示输入框。

二、卡顿现象：

字段数据管理数据120条。

点击【添加】，【删除】（卡顿5S左右）才会正常添加或删除。

三、功能优化：

默认折叠所有父级节点.（本质：减少页面dom节点数量）
鼠标悬停绿色的区域时候，自动显示xx要素的输入框，鼠标离开，自动隐藏当前行的输入框，开启另外一行的输入框。（原则：保持只有一条可以编辑行）（本质：减少表单项，减少状态管理数量，减少dom数）

四、目前优化后：

要素管理数据120条。

点击【添加】，【删除】(1s以内)

五、汇报方式

如果优化的功能，对原本功能有做改动，还是需要做一些讨论，和产品、测试、项目经理拉齐信息。至少也让对方看到数据的变化，性能的优化点，有理有据。

也能让对方看到我们对性能优化的理解，让自己的能力被大家认可。

六、源码部分

  
  function App(){
    const onMouseover = (
        e: { target: { className: string | string[]; localName: string } },
        row: {
          id: any;
          name?: string | undefined;
          isLeaf?: boolean | undefined;
          parentId?: React.Key | undefined;
          children?: DataSourceType[] | undefined;
        },
      ) => {
        if (
          e.target.className &&
          typeof e.target.className === 'string' &&
          (e.target.className.includes('input-item') || e.target.localName === 'input') &&
          !editableKeys.includes(row.id)
        ) {
          setEditableRowKeys([row.id]);
        }
      };
      return (
      <EditableProTable<DataSourceType>
          expandable={{
            expandedRowKeys,
            onExpandedRowsChange: setExpandedRowKeys,
            // indentSize: 20,
          }}
          rowKey="id"
          columns={[
          {
              title: '要素快捷键',
              dataIndex: 'Key',
              className: 'input-item',
          ]}
          onRow={(row) => ({
            onMouseOver: throttle((e) => onMouseover(e, row), 1),
          })}
         
         
    />)
  }

性能优化-antd design pro之EditableProTable树形表格(带源码)

背景