优化React-Redux关联PureComponent：Header组件无props变更却重渲染

嘿，我之前也踩过这个一模一样的坑！明明用了PureComponent，why-did-you-update也提示props没变化，但组件还是每次都跟着store变更重渲染，真的头疼。咱们来一步步拆解可能的原因和解决办法：

1. 检查mapStateToProps是否返回了新的引用类型值 #

PureComponent的浅比较只会对比引用是否相同，如果你的mapStateToProps每次都返回新的对象、数组，哪怕内容和之前完全一致，浅比较都会判定props发生了变化，触发重渲染。比如这种写法就有问题：

const mapStateToProps = (state) => {
  return {
    // 每次都创建新对象，引用地址不同
    userInfo: {
      name: state.user.name,
      avatar: state.user.avatar
    }
  }
}

解决方案：

• 直接返回state中的原有引用（如果不需要加工）：userInfo: state.user
• 用reselect创建记忆化选择器，只有当依赖的state字段变化时才重新计算结果，避免生成新引用：

import { createSelector } from 'reselect'

// 基础选择器，获取原始state片段
const selectUser = state => state.user

// 记忆化选择器，只有selectUser返回的内容变了才会重新计算
const selectUserInfo = createSelector(
  [selectUser],
  user => ({ name: user.name, avatar: user.avatar })
)

const mapStateToProps = state => {
  return {
    userInfo: selectUserInfo(state)
  }
}

2. 排查mapDispatchToProps是否生成了新函数 #

如果你的mapDispatchToProps是手动返回包含箭头函数的对象，每次组件连接Redux时都会生成新的函数引用，PureComponent会认为props发生了变化。比如：

const mapDispatchToProps = dispatch => {
  return {
    // 每次都创建新函数
    logout: () => dispatch(logoutAction())
  }
}

解决方案：

• 直接给connect的第二个参数传action creators对象，connect内部会自动用bindActionCreators处理并缓存函数引用：

// 直接传递action creators对象
const mapDispatchToProps = {
  logout: logoutAction
}

export default connect(mapStateToProps, mapDispatchToProps)(Header)

3. 检查父组件传递的props是否有不稳定的引用 #

如果Header的父组件每次渲染时，传递给Header的props（比如回调函数、自定义对象）是新创建的，哪怕Header是PureComponent，也会触发重渲染。比如父组件里这么写：

// 父组件渲染方法里
<Header 
  history={this.props.history} 
  logout={() => this.handleLogout()} // 每次渲染都生成新函数
/>

解决方案：

• 在父组件的constructor里绑定回调，或者用类属性箭头函数定义，保证引用稳定：

// 父组件类中
handleLogout = () => {
  // 你的注销逻辑
}

// 渲染时
<Header 
  history={this.props.history} 
  logout={this.handleLogout} // 引用地址始终不变
/>

4. 确认history prop的引用是否稳定 #

你的Header里用到了this.props.history.push，如果history的引用每次都变，也会触发重渲染。不过一般react-router提供的history对象是稳定的，除非你在父组件里手动创建了新的history实例。如果是这种情况，建议直接使用react-router的withRouter高阶组件包裹Header，它会传递稳定的history引用。

最后总结排查步骤 #

1. 先检查mapStateToProps，避免返回新的对象/数组引用
2. 优化mapDispatchToProps，使用action creators对象而非手动创建函数
3. 检查父组件传递的props，确保引用类型的props（函数、对象）稳定
4. 用reselect减少不必要的状态计算

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