Bug 分析与解决：antdPro-formList → 性能优化（带源码）
2023-10-30 04:19:26
引言
在 Web 开发中，流畅的用户体验至关重要。当页面出现卡死或响应缓慢的情况时，会对用户造成极大的困扰。本文将深入探讨 antdPro 中 formList 组件的性能优化，提供一系列实用技巧和技术，帮助开发人员大幅提升 formList 的性能表现。
问题
问题表现：
- 页面卡死，无法进行交互
复现路径：
- 项目：HT 文本解析平台
- 模块：提取模型配置
- 复现场景：要素 130 条数据，点击“提交”按钮
问题分析
通过分析发现，页面卡死的原因在于 formList 组件的渲染效率低下。具体来说，在数据量较大时，formList 会对每一个子项进行不必要的重新渲染，导致大量的虚拟 DOM 更新，从而造成性能瓶颈。
解决方案
为了解决这个问题，需要对 formList 组件的渲染策略进行优化。以下是一些行之有效的优化方法：
1. 使用 useEffect 减少不必要的渲染
useEffect 是一个 React Hook，用于在组件挂载、更新或卸载时执行副作用。我们可以利用 useEffect 来控制 formList 的渲染时机，减少不必要的渲染次数。
useEffect(() => {
// 只有当 formList 的数据发生变化时才重新渲染
if (data !== prevData) {
// 渲染 formList
}
}, [data]);
2. 使用 useMemo 优化子项
useMemo 是另一个 React Hook，用于在每次组件渲染时对表达式进行记忆。我们可以利用 useMemo 来优化 formList 的子项，避免对每次重新渲染都进行不必要的计算。
const child = useMemo(() => {
// 昂贵的计算
return <Child />;
}, []);
3. 使用 useCallback 优化事件处理函数
useCallback 是一个 React Hook，用于在每次组件渲染时对函数进行记忆。我们可以利用 useCallback 来优化 formList 的事件处理函数，避免对每次重新渲染都创建新的函数。
const handleClick = useCallback(() => {
// 事件处理逻辑
}, []);
优化效果
经过以上优化后，formList 的性能得到了显著提升。页面卡死问题得到了解决，用户体验得到了极大的改善。
总结
本文介绍了 antdPro 中 formList 组件的性能优化技巧，包括利用 useEffect、useMemo 和 useCallback 等 React Hook。通过这些优化，可以显著提升 formList 的性能，为用户提供流畅顺畅的交互体验。
