如何非常优雅地在React组件之间进行props传入函数的执行绑定（订阅）

Question

有一个React的组件A和一个组件B：

const CompA = () => {
  const expectProcess = () => {
    console.log('i am expected executing');
  }

  return (
    <div>A</div>
  )
}

const CompB = () => {
  const CompBClick = () => {
    console.log('comp B execute');
  }

  return (
    <div>
      <button onClick={CompBClick}>测试</button>
      <CompA />
    </div>
  )
}

我的需求是：

在组件CompB中单独调用执行CompBClick事件，同时希望CompA中的expectProcess在执行完上述事件后会一块执行。
我希望的优雅方式：两个组件高度解耦（可以有一个两者绑定的事件处理），即我只关心B中的方法，我只需要去执行B的方法，能同时带动A组件的方法。类似于两个函数绑定，一个驱动另一个。

希望的目的：
以优雅的方式实现A，B组件解耦，在执行A，B这两个方法绑定后，我只需要关心调用B的方法，即可驱动A组件的绑定事件。

我的解决方案：

1. 先想到了观察者模式来实现，B作为发布者，A是订阅者，把A的方法订阅到B中，B中作为发布者调用发布方法，触发A的订阅方法，但是缺点是每次都要引用一次Observer（比较麻烦）
2. 利用Object.defineProperty方法的getter setter拦截，把函数作为一个对象的属性，每次调用的时候去get里面拦截，执行A的方法，但是不够优雅，需要传递一个新对象，而且容易被覆盖。

想问问大家有没有什么比较优雅的解决方案，谢谢了。

Answer 1

试试redux的监听？