React Redux 组件更新/渲染原理 connect之mapStateToProps 看这篇就够了！比中文文档好用！

最新推荐文章于 2025-06-01 09:08:06 发布

原创

最新推荐文章于 2025-06-01 09:08:06 发布 · 4.8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #react #javascript #reactjs #es6

本文详细解析了React Redux中connect函数的mapStateToProps原理，探讨为何修改state后组件未更新的原因，以及如何通过浅比较判断组件是否需要重渲染。文中通过多个示例说明了如何正确和错误地使用mapStateToProps，强调了纯函数的重要性以及浅拷贝在性能优化中的作用。

本文深入浅出mapStateToProps，解答：

为什么修改state，组件未渲染/更新？
如何从新旧state判断更新的值、未更新的值，从而决定是否re-render？

Redux中，state作为单一的数据源，众所周知，每次更新state都要通过return { ...state, others }来返回一个新的state，但是它是怎么来判断一些组件到底要不要re-render（刷新、重渲染）呢？尤其是当state层次很深的时候，会有效率问题、该刷新时不刷新的问题吗？

其实关键在于这个connect()函数的第一个参数：mapStateToProps。下面举个例子：

/*
假设state的结构如下：
state = {
  user: {username: 'root', name: '根'};
  globals: {showMenu: true, showModal: false};
};
*/

function mapStateToProps(state) {
   
   
  return {
   
   
    user: state.user,  // 比如常见的获取用户信息
    showMenu: state.globals.showMenu,  // 比如state层次有多层，可以直接获取到那个深层的数据
  };
}

export default connect(mapStateToProps)(MyComponent);

众所周知，mapStateToProps必须是个纯函数，只要有相同的输入，一定会有相同的输出，不会有任何副作用，没有异步操作。输入是state，输出是一个对象，这个对象会变为被connect组件的props。

其实，这个函数通常是选取了state的一个子集，通过props映射到了组件上。如果这个子集更新了，那么组件就会re-render。具体原理、过程如下：

原理

当state更新时（即nextState !== state，注意这里用===来比较，所以每次更新state需要用文章开头的方式来更新），
react-redux会调用所有的mapStateToProps函数（所以每个mapStateToProps函数应该很快能运算结束，不然会成为应用性能瓶颈），
针对每次调用mapStateToProps，检查函数的结果（