先说说基础架构。项目采用函数组件+Hooks的写法，用useState管理表格数据和筛选条件，useEffect处理数据获取和过滤逻辑。数据源方面使用了axios进行异步请求，配合useReducer处理加载状态和错误信息。这里有个细节：初始数据需要深拷贝保存两份，一份用于展示，另一份保留原始数据，这样重置筛选时就不需要重新请求接口。
筛选功能实现时遇到了渲染性能问题。当表格数据超过5000条时，每次输入筛选条件都会明显卡顿。通过React DevTools发现是过滤函数在每次输入时都遍历了整个数据集。解决方案很经典：使用useMemo缓存过滤结果，只有当原始数据或筛选条件变化时才重新计算。对于输入框则加入防抖处理，避免频繁触发重渲染。
可视化部分集成了ECharts，但直接使用发现内存泄漏严重。原因是图表实例没有及时销毁。后来在useEffect里返回清理函数，在组件卸载时调用dispose方法。另外将图表配置项用useMemo缓存，避免每次渲染都生成新对象导致图表异常闪烁。
表格渲染的优化也费了不少心思。最初直接渲染所有数据，页面直接卡死。后来实现虚拟滚动，只渲染可视区域内的行。这里用到Intersection Observer API监听滚动容器，动态计算需要渲染的数据索引。配合React.memo对表格行组件进行记忆化，避免不必要的重渲染。
状态管理方面，最初把所有状态都放在组件内，导致props drilling严重。后来使用useContext将筛选状态和数据处理方法提取到全局，子组件通过useSelector按需订阅状态。对于复杂状态逻辑，比如多维筛选条件，采用useReducer替代多个useState，使状态变更更可预测。
数据导出功能遇到浏览器内存限制。当导出数据量较大时，Chrome会崩溃。最终采用分片处理，将大数据拆分成多个Blob分段生成，通过Streams API实现流式下载。同时添加进度提示，改善用户体验。
项目部署后还发现个隐藏问题：Safari浏览器对ES6新特性支持不全。通过Babel转译和polyfill解决兼容性问题，特别要注意Array.prototype.includes等方法的兼容处理。
这次开发最大的体会是：React生态虽然丰富，但具体到数据分析场景，核心还是要做好状态管理和性能优化。特别是数据量上去之后，每个细节都可能成为性能瓶颈。接下来打算尝试Web Workers处理计算密集型任务，进一步解放主线程。