React组件可直接使用完整store时，仍需mapStateToProps的原因是什么？

关于mapStateToProps的常见疑问解答 #

首先明确核心前提：在标准React-Redux的设计逻辑中，并不推荐组件直接访问完整的store实例，mapStateToProps作为connect高阶函数的核心参数，作用就是建立Redux全局状态和组件props的映射规则，它的价值和使用效果可以从以下几个维度理解：

1. 核心性能优化，避免无效重渲染 #

这是仅选取组件所需部分数据的最直接效果：
React-Redux会对mapStateToProps的返回结果做浅对比，只有当组件依赖的这部分状态真的发生变化时，才会触发组件重渲染。如果直接把完整store传入组件，只要store内任意字段更新，不管和当前组件有没有关系，都会触发组件重渲染，项目规模越大，冗余渲染带来的性能损耗就越明显。

2. 组件与全局状态解耦，提升可复用性 #

组件只需要声明自己需要什么数据，不需要感知这些数据在全局store中的存储路径。
举个例子：一个用户头像组件只需要avatarUrl和nickname两个属性，后续如果store里的用户数据存储路径从state.user.info.avatar调整为state.account.base.avatar，你只需要修改mapStateToProps里的取值逻辑即可，组件内部的代码不需要任何改动。如果组件直接硬编码访问完整store的路径，修改结构时所有用到相关数据的组件都要同步调整，维护成本极高。

3. 支持派生数据预处理，减少重复逻辑 #

你可以直接在mapStateToProps中对store的原始数据做计算、过滤、格式化等预处理，组件拿到手就能直接使用，不需要在每个组件的render函数里重复写相同的计算逻辑。如果配合reselect库使用，还能对派生结果做缓存，只有依赖的原始状态变化时才会重新计算，进一步降低性能开销。
比如你需要在组件里展示已完成的订单列表，直接在mapStateToProps里返回state.orderList.filter(item => item.status === 'finished')即可。

4. 提升代码可维护性与可测试性 #

组件依赖的所有全局状态都集中在mapStateToProps中声明，只需要看这一段代码就能明确组件需要的外部数据，不用遍历整个组件代码查找store的引用逻辑。做单元测试时也不需要模拟完整的store实例，只需要给组件传入对应结构的props就能完成测试，成本大幅降低。

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