如何使用recompose的withPropsOnChange监听对象内部属性变化？

我来帮你搞定这个问题！你想要用recompose的withPropsOnChange监听person对象里的name和location属性变化，核心在于自定义对比逻辑，而不是直接对比整个对象的引用。下面给你具体的实现方案：

正确实现代码示例 #

import { compose, withPropsOnChange } from 'recompose';

// 你的基础组件
const PersonComponent = ({ person, greetingText }) => (
  <div>
    <p>姓名：{person.name}</p>
    <p>所在地：{person.location}</p>
    <p>动态问候：{greetingText}</p>
  </div>
);

// 用compose包装增强逻辑
const enhance = compose(
  withPropsOnChange(
    // 第一步：自定义对比函数，只监听name和location的变化
    (prevProps, nextProps) => {
      const prevPerson = prevProps.person;
      const nextPerson = nextProps.person;
      // 只要name或location有一个变化，就返回true触发更新
      return prevPerson.name !== nextPerson.name || prevPerson.location !== nextPerson.location;
    },
    // 第二步：当触发条件满足时，生成新的props传递给组件
    ({ person }) => ({
      greetingText: `你好，来自${person.location}的${person.name}！`
    })
  )
);

export default enhance(PersonComponent);

关键逻辑解释 #

1. 自定义对比函数：
   如果你直接把['person']作为withPropsOnChange的第一个参数，它会对比整个person对象的引用——哪怕只是age变化，只要对象重新赋值了，就会触发更新，这不符合你只关心name和location的需求。
   而自定义的对比函数可以精准控制：只有当name或location的具体值发生变化时，才返回true，触发后续的props生成逻辑。

2. 复用对比逻辑：
   如果多个地方需要用到同样的监听规则，你可以把对比函数抽出来单独复用：

   const shouldUpdateNameOrLocation = (prevProps, nextProps) => {
     const { person: prevP } = prevProps;
     const { person: nextP } = nextProps;
     return prevP.name !== nextP.name || prevP.location !== nextP.location;
   };
   
   // 后续直接调用即可
   withPropsOnChange(shouldUpdateNameOrLocation, ({ person }) => ({
     greetingText: `你好，来自${person.location}的${person.name}！`
   }))
   

这样就能精准实现你想要的：只有person对象里的name和/或location变化时，才触发withPropsOnChange的执行逻辑。

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