深入浅出之 swr
2021-07-20 02:26:35
SWR是一个基于React Hook的请求库，其实现方式具有多个亮点和创新设计。以下是深入浅出地解析SWR的关键点：
一、API层面 请求函数：SWR允许传入fetcher或直接传入参数，这种设计增强了灵活性，实现了请求和处理逻辑的解耦。 依赖处理：若依赖的接口未返回数据，则会触发错误处理流程，确保请求顺序执行，这有助于维护数据的完整性和准确性。 全局配置：通过Context模式实现全局数据共享，使用SWRConfig组件对外暴露Provider，用户可以传递配置参数，这使得全局配置变得简单且易于管理。
二、请求数据逻辑 性能优化：使用useCallback接收key值，以提高性能，减少不必要的渲染和计算。 批量数据修改：通过useReducer优化批量数据修改，避免了无效渲染，提升了应用的响应速度。 避免组件卸载后的错误：使用useRef存储unmountedRef值，避免组件卸载后的setState错误，增强了应用的稳定性。 服务端渲染兼容：在ui渲染前使用useLayoutEffect触发请求，提升速度且兼容服务端渲染，这有助于提升应用的用户体验。 请求函数处理：请求函数在revalidate中处理，便于回调和调用，这使得请求逻辑更加清晰和易于管理。
三、回调处理与缓存优化 回调处理：当接口出现错误时，会调用传入的onErrorRetry函数进行处理，默认采用指数回退算法，这简化了接口错误后的定制化需求。 缓存策略：实现“stalewhilerevalidate”策略，允许客户端先使用不新鲜的缓存数据，然后异步重新验证以更新数据。这种策略在提升用户体验的同时，也保证了数据的实时性。 缓存存储：使用cacheGet方法存储接口返回数据，用于内存索引，这有助于快速访问和更新缓存数据。
四、总结 SWR库的实现涵盖了从请求处理、依赖管理、全局配置到缓存优化等多个层面的创新设计，旨在通过缓存提升用户体验。 对于希望封装基于hook的组件或实现类似功能的开发者，SWR提供了一个值得参考的设计思路和实现方法。 通过理解SWR的核心机制和实现细节，可以更好地应用于实际项目中，优化应用性能和用户体验。
热门标签
