跳到主要内容

记一次性能优化

· 阅读需 2 分钟
GSemir

篇幅有限，本文只记录优化策略，对于优化的效果不另做证明

针对使用 antd 的 ProTable 组件的页面进行优化，主要方案如下

  1. 减少 State

检查代码行文逻辑，尤其是 request 中的清理或重置状态的逻辑

可以使用 if 减少无意义的 setState

  1. 使用 setEditableKeys(ids) 替代 action?.startEditable(id)

  2. 利用缓存减少数据处理过程（空间换时间）

使用 useRef 存储数据处理结果，作为后续处理过程的参考或者恢复时的备份

尽可能将多个需求的数据处理过程合并，减少时间复杂度

  1. 虚拟滚动

  2. 使用 useMemo 处理 tableComponents

当需要重写 table 的组件例如 cell 或者 body 时，可以使用 useMemo 缓存这个组件，减少不必要的计算与更新

使用 useCallback 缓存复杂回调函数，对于作为回调函数传入 memo 组件的函数，非常好用

  1. columns 配置中适当添加 shouldCellUpdate

说实话，以上的方案对于页面性能提升非常有限。最后还是使用 table 重写了可编辑表格组件，弃用了 EditableProTable 组件，性能才得到了显著提升。。。