如何实现仅在React组件Props更新（而非State）时触发逻辑？

我太懂这种纠结了——之前靠componentWillReceiveProps精准监听props变化，结果它被标为不安全废弃了，换成componentDidUpdate又总被state更新干扰，手动遍历对比所有props又重复冗余，完全是两难对吧？给你几个实用的方案，按需选择就行：

方案1：在componentDidUpdate中精准对比目标Props #

不用对比所有props，只挑你关心的那几个做判断，这样就能过滤掉state变化的情况。比如你只关心user.id的变化：

componentDidUpdate(prevProps) {
  // 只在user.id变化时触发逻辑
  if (prevProps.user.id !== this.props.user.id) {
    this.fetchUserDetails(this.props.user.id);
  }
}

如果需要对比多个props，或者怕漏写，可以用浅对比工具（比如react-redux自带的shallowEqual，或者lodash的isEqual）来批量判断：

import { shallowEqual } from 'react-redux';

componentDidUpdate(prevProps) {
  // 浅对比所有props，只有当props有变化时才执行
  if (!shallowEqual(prevProps, this.props)) {
    this.handlePropsChange();
  }
}

注意：如果props里有深层嵌套对象，浅对比可能识别不到变化，这时候可以用深对比（比如lodash的_.isEqual），但要注意深对比的性能开销，尽量把props设计成 immutable 结构，这样浅对比就能生效。

方案2：改用函数组件+useEffect（推荐） #

如果你的组件可以改成函数组件，useEffect简直是精准监听props变化的神器——它的依赖数组可以明确指定要监听的props，只有当依赖项变化时才触发回调，完全不用手动对比：

import { useEffect } from 'react';

function MyComponent({ user }) {
  useEffect(() => {
    // 只有当user变化时才执行这里的逻辑
    fetchUserDetails(user.id);
  }, [user]); // 依赖数组里只放你关心的props

  return <div>用户详情组件</div>;
}

这种方式代码更简洁，逻辑更清晰，也是React官方推荐的现代写法。

方案3：封装高阶组件（HOC）复用对比逻辑 #

如果你的项目里有很多类组件需要监听props变化，可以封装一个HOC来复用对比逻辑，避免每个组件都写重复的对比代码：

import { shallowEqual } from 'react-redux';

function withPropsChange(WrappedComponent, onPropsChange) {
  return class extends React.Component {
    componentDidUpdate(prevProps) {
      if (!shallowEqual(prevProps, this.props)) {
        onPropsChange(this.props, prevProps);
      }
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

// 使用示例
class MyComponent extends React.Component {
  // 组件逻辑
}

// 给MyComponent添加props变化监听
export default withPropsChange(MyComponent, (newProps, oldProps) => {
  console.log('props变化了', newProps, oldProps);
  // 执行你的业务逻辑
});

这样所有需要监听props变化的组件，都可以通过这个HOC来实现，不用重复写对比代码。

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