React Query

本文探讨了在DeFi前端开发中，由于数据量增长和对链上数据的实时性需求，导致React Query过度使用、useMemo滥用以及不稳定的重新渲染等性能问题。文章提出了Fetch -> Mapper -> Hook架构模式，通过分离数据获取、转换和UI展示，结合queryClient.fetchQuery进行缓存，简化了数据流，提高了前端性能和可维护性。

本文提出了一种更适合 Web3 场景的数据获取方法，通过 Fetch -> Mapper -> UI 三层架构，将复杂性隔离，中心化缓存，避免过多的 hooks 和重渲染，从而提高性能和可维护性。这种方法借鉴了后端架构的思想，将前端分为数据获取层、数据转换层和UI展示层，使得代码更清晰、可预测，并易于扩展。