TanStack Table 中复选框渲染性能优化实践

问题背景

在使用 TanStack Table（原 React Table）构建权限管理表格时，开发者遇到了复选框渲染延迟的问题。表格中每一行代表一个权限，每一列代表一个角色，单元格内使用复选框表示该角色是否拥有该权限。当用户点击复选框时，会出现明显的延迟才能看到状态变化。

原始实现分析

最初实现中，开发者采用了以下关键设计：

1. 使用 useMemo 缓存列定义（columns），依赖项为角色列表和角色权限数据
2. 在复选框的 onCheckedChange 回调中，先更新本地状态，再调用 API 更新后端
3. 使用 defaultChecked 而非 checked 来控制复选框状态

这种实现方式虽然遵循了 TanStack Table 的最佳实践（使用 useMemo 缓存列定义），但却导致了性能问题。每次点击复选框时，由于状态更新触发了列定义的重新计算，进而导致整个表格的重新渲染，造成了明显的延迟。

性能问题根源

经过深入分析，发现性能瓶颈主要来自以下几个方面：

1. 状态更新导致的列重新计算：每次复选框状态变化都会触发 rolePermissions 状态更新，进而触发 useMemo 重新计算列定义
2. 不必要的本地状态管理：实际上权限数据来自父组件，本地状态只是作为中间层，增加了复杂性
3. 列定义的复杂性：动态生成的列（每个角色对应一列）使得列定义计算成本较高

优化方案

最终采取的优化方案是：

1. 移除不必要的本地状态：直接使用父组件传入的 rolePermissions 和 permissions，不再维护本地副本
2. 简化数据流：复选框点击直接调用父组件传入的 onUpdateRolePermission 方法，不再经过本地状态中转
3. 保留 useMemo 优化：继续使用 useMemo 缓存列定义，但依赖项减少，计算更高效

优化后的关键代码如下：

const handleCheckboxChange = async (
  roleId: string,
  permissionId: string,
  currentChecked: boolean
) => {
  try {
    await onUpdateRolePermission(roleId, permissionId, !currentChecked);
  } catch (e) {
    console.error("error from change", e);
  }
};

const columns = React.useMemo(() => {
  return getColumns({ roles, handleCheckboxChange, rolePermissions });
}, [roles, rolePermissions]);

优化效果

经过上述优化后：

1. 复选框响应变得即时，不再有可感知的延迟
2. 代码更加简洁，减少了不必要的状态管理
3. 仍然保持了 TanStack Table 的最佳实践
4. 数据流更加清晰，便于维护

经验总结

通过这个案例，我们可以总结出以下 TanStack Table 使用经验：

1. 谨慎管理状态：在表格组件中，应该尽量减少不必要的本地状态，特别是当数据来自父组件时
2. 合理使用 useMemo：对于复杂的列定义，useMemo 是必要的，但要确保依赖项尽可能简单
3. 直接操作数据源：当数据来自外部时，优先考虑直接操作外部数据源，而不是通过本地状态中转
4. 性能监控：对于交互复杂的表格，应该密切关注用户操作的响应速度，及时优化

这个案例展示了如何在使用 TanStack Table 构建复杂交互表格时，平衡功能实现与性能优化的关系，为类似场景的开发提供了有价值的参考。