React Query 与 Emotion 结合使用时避免无限循环的最佳实践

在使用 React Query 与 Emotion 等 CSS-in-JS 库时，开发者可能会遇到组件无限重渲染的问题。本文将深入分析这一现象的原因，并提供解决方案。

问题现象

当同时满足以下条件时，应用会出现无限循环：

1. 使用自定义 hook 调用 useQuery
2. 查询函数返回复杂对象（如 ArcGIS 的 Geometry 对象）
3. 存在嵌套组件结构
4. 最内层组件被 Emotion 的 styled 组件包裹

根本原因分析

问题的核心在于 React 组件的稳定性。在示例中，开发者犯了一个常见错误：

function MyComponent() {
  // ❌ 错误做法：在组件内部创建styled组件
  const Wrapper = styled.div``;
  
  return <Wrapper>...</Wrapper>;
}

这种写法会导致：

1. 每次父组件渲染时都会创建新的 Wrapper 组件实例
2. React 会认为这是一个新组件，导致子组件卸载和重新挂载
3. 子组件的重新挂载会触发 React Query 的 refetchOnMount 行为
4. 数据重新获取又会导致父组件重新渲染
5. 形成无限循环

解决方案

正确使用 Emotion 的 styled 组件

应该将 styled 组件定义移到组件外部：

// ✅ 正确做法：在组件外部定义styled组件
const Wrapper = styled.div``;

function MyComponent() {
  return <Wrapper>...</Wrapper>;
}

其他优化建议

1. 合理设置 staleTime：适当增加 staleTime 可以减少不必要的重新获取
2. 组件记忆化：对于复杂子组件，考虑使用 React.memo
3. 查询键稳定性：确保查询键不会不必要地变化
4. 复杂对象处理：对于第三方库返回的复杂对象，考虑在查询函数中进行简化或序列化

总结

React 组件的稳定性是性能优化的关键。在使用 React Query 与 CSS-in-JS 库结合时，特别注意：

1. 避免在组件内部创建 styled 组件
2. 保持组件引用的稳定性
3. 合理配置查询选项

遵循这些最佳实践，可以避免无限循环问题，同时保持应用的性能和可维护性。