React中State Variables与Redux选型：后端数据存储方案哪种更优？

两种方案没有绝对的优劣，要结合你的项目实际场景选择，各自的适用场景和优劣如下：

方案1：用本地state变量存储接口返回数据 #

适用场景 #

• 仅当前页面/单个组件树需要用到这份数据，其他页面/全局组件完全不需要访问
• 数据不需要持久化缓存，页面卸载后就可以直接销毁，下次进入重新拉取即可
• 项目规模小，没有引入Redux这类全局状态管理工具，不想额外增加项目复杂度

优势 #

• 实现简单，不需要写冗余的action、reducer代码，开发效率更高
• 数据流更直观，数据的更新和销毁都和组件生命周期绑定，不容易出现脏数据

劣势 #

• 跨组件/跨页面共享数据成本高，如果有多个不相关的组件需要用这份数据，要做多层props透传，维护成本会快速上升

方案2：将数据存入Redux store全局管理 #

适用场景 #

• 这份数据需要在多个跨页面、跨组件树的位置使用，比如用户基础信息、全局配置、跨页面共享的业务数据
• 需要对接口数据做持久化缓存，比如用户切换页面后再切回原来的页面，不需要重复发起接口请求，直接读取缓存即可
• 项目已经引入Redux做全局状态管理，有成熟的状态更新、缓存失效的规范

优势 #

• 避免多层props透传，任意组件都可以直接从store读取目标数据
• 可以统一做数据的缓存、更新、失效逻辑，不需要在多个组件重复写接口调用代码

劣势 #

• 需要编写额外的Redux相关代码，实现成本更高，小型项目用会显得冗余
• 如果没有配套的缓存清理逻辑，很容易出现脏数据，导致页面展示和实际接口返回不一致的问题

选型建议 #

如果你的数据仅在单个页面内使用，优先选本地state存储的方案，足够简单高效；如果数据需要全局共享、或者需要做缓存减少重复请求，再选择Redux存储的方案。

内容的提问来源于stack exchange，提问作者Luve Mashru