为何React子组件的ShouldComponentUpdate方法未被调用？

咱们一步步来梳理可能的原因，帮你定位问题：

1. 优先检查列表项的key属性（最常见原因） #

你父组件渲染Location子组件时，没有设置唯一的key属性。React依赖key来识别列表中每个组件的身份，当Redux状态更新后，如果没有key，React会直接销毁所有旧的子组件实例，重新创建新的实例——这时候子组件走的是挂载流程（调用componentDidMount），而非更新流程，自然不会触发shouldComponentUpdate。

你需要给每个Location添加唯一的key，比如用location对象的唯一标识（如id）：

return this.props.locations.map((location) => 
  <Location 
    key={location.id} // 必须添加唯一key，别用数组index
    toggleLocationStatusInfo={this.props.toggleLocationStatusInfo} 
    location={location} 
  />
)

注意：别用数组index当key，除非你的列表永远不会排序、新增或删除项，否则会引发后续更新异常。

2. 修正mapDispatchToProps中的函数绑定错误 #

看你父组件的mapDispatchToProps代码，这里有个明显的写法问题：

toggleLocationStatusInfo: dispatch(actions.toggleLocationStatusInfo()),

你直接调用了actions.toggleLocationStatusInfo()，把dispatch的返回值（action对象）赋值给了toggleLocationStatusInfo——这意味着子组件拿到的不是一个可调用的函数，而是一个action对象！虽然你说状态能更新，但这个写法会导致每次父组件渲染时，toggleLocationStatusInfo都是新对象，干扰React的更新判断。

正确写法应该是定义成函数，让子组件调用时才触发dispatch：

const mapDispatchToProps = (dispatch) => ({
  fetchLocations: (data) => dispatch(actions.fetchLocations(data)),
  toggleLocationStatusInfo: () => dispatch(actions.toggleLocationStatusInfo())
  // 如果需要传参，改成：(locationId) => dispatch(actions.toggleLocationStatusInfo(locationId))
});

或者更简洁的方式，直接把action creator传给connect，它会自动绑定dispatch：

import { toggleLocationStatusInfo, fetchLocations } from './actions';

const mapDispatchToProps = {
  fetchLocations,
  toggleLocationStatusInfo
};

3. 确认父组件是否允许子组件更新 #

虽然你说父组件的shouldComponentUpdate正常执行，但要确认它的返回值是true。如果父组件自定义的shouldComponentUpdate返回false，会阻止所有子组件的更新流程，子组件的shouldComponentUpdate自然不会被调用。不过你没给父组件写自定义的shouldComponentUpdate，默认返回true，这个可能性较低，但可以排查一下。

4. 检查Redux状态更新是否符合Immutable原则 #

你提到数组对象已正常更新，但要确认：更新后的location对象是否是新的引用？如果你的Redux reducer直接修改了现有对象的属性（违反Immutable原则），React会认为子组件的location props没有变化，不会触发更新。

正确的reducer写法应该返回新对象：

case TOGGLE_LOCATION_STATUS:
  return {
    ...state,
    locations: state.locations.map(loc => 
      loc.id === action.payload.id ? {...loc, status: !loc.status} : loc
    )
  };

避免直接修改原对象：loc.status = !loc.status——这种mutate写法会让React无法检测到变化。

5. 确认子组件是Class组件 #

你的子组件代码看起来是Class组件，但要确保没有不小心写成函数组件。函数组件没有shouldComponentUpdate生命周期（除非用React.memo），如果是函数组件，你写的shouldComponentUpdate方法根本不会被执行。不过从你的代码看，这个可能性不大，但可以再确认一下。

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