React类组件中如何在Redux状态变化时执行指定函数？

要在类组件里实现和useEffect等价的依赖监听逻辑，包括Redux Toolkit中的状态，核心思路是把Redux状态映射为组件props，再在componentDidUpdate中对比前后props的变化，具体步骤如下：

1. 将需要监听的Redux状态映射为组件props #

通过react-redux的connect方法（适配类组件的标准方案），把Redux切片中你关心的状态提取出来，作为props传入组件。

示例：

import { connect } from 'react-redux';

class YourComponent extends React.Component {
  // 组件逻辑...
}

// 映射Redux状态到props
const mapStateToProps = (state) => ({
  userInfo: state.userSlice.userInfo, // 假设userSlice是你的Redux切片
  cartItems: state.cartSlice.items
});

export default connect(mapStateToProps)(YourComponent);

2. 在componentDidUpdate中对比依赖项并执行代码 #

在componentDidUpdate生命周期里，拿到更新前的prevProps，和当前的this.props对比你指定的依赖项（对应Redux状态的props），如果任一依赖项发生变化，就执行目标代码。

浅对比（适合基础类型或不可变简单对象） #

Redux Toolkit的createSlice默认会处理不可变更新，状态变化时会返回新的对象/数组引用，所以对于基础类型、简单对象/数组，直接用引用对比即可：

componentDidUpdate(prevProps) {
  // 指定需要监听的依赖项
  const currentDeps = [this.props.userInfo, this.props.cartItems];
  const prevDeps = [prevProps.userInfo, prevProps.cartItems];

  // 检查是否有依赖项变化
  const hasChanged = currentDeps.some((dep, idx) => dep !== prevDeps[idx]);

  if (hasChanged) {
    this.handleDependencyChange();
  }
}

// 组件挂载时也需要执行的话，在componentDidMount中调用
componentDidMount() {
  this.handleDependencyChange();
}

handleDependencyChange() {
  // 这里写你的业务逻辑：比如发起请求、更新组件状态等
  console.log('Redux状态或props发生变化');
}

深对比（适合嵌套对象/数组） #

如果依赖项是嵌套对象或数组，浅对比（引用对比）无法检测内部属性变化，这时候可以用lodash.isEqual做深对比：

import isEqual from 'lodash/isEqual';

componentDidUpdate(prevProps) {
  const userChanged = !isEqual(this.props.userInfo, prevProps.userInfo);
  const cartChanged = !isEqual(this.props.cartItems, prevProps.cartItems);

  if (userChanged || cartChanged) {
    this.handleDependencyChange();
  }
}

3. 封装复用逻辑（可选） #

如果多个组件需要类似逻辑，可以在基类中封装通用方法，减少重复代码：

import isEqual from 'lodash/isEqual';

class BaseComponent extends React.Component {
  useEffectLike(callback, dependencies) {
    // 首次挂载时执行并存储初始依赖
    if (!this._prevDeps) {
      this._prevDeps = dependencies;
      callback();
      return;
    }

    // 对比依赖变化
    const hasChanged = dependencies.some((dep, idx) => !isEqual(dep, this._prevDeps[idx]));
    if (hasChanged) {
      callback();
      this._prevDeps = dependencies;
    }
  }
}

// 子类使用示例
class YourComponent extends BaseComponent {
  componentDidUpdate() {
    this.useEffectLike(() => {
      // 业务逻辑
    }, [this.props.userInfo, this.props.cartItems]);
  }

  componentDidMount() {
    this.useEffectLike(() => {
      // 业务逻辑
    }, [this.props.userInfo, this.props.cartItems]);
  }
}

关键注意点 #

• 不要在回调中修改会触发依赖项变化的状态，否则会导致无限循环。
• Redux Toolkit的不可变更新确保了状态变化时会生成新引用，尽量依赖这个特性做浅对比，深对比仅在必要时使用（避免性能损耗）。

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