react+react-router 对所有组件作统一处理的方法

Question

遇到一个需求 需要在每个组件中处理一件相同的事情，但是几十个组件如果把同样的代码copy到componentWillMount中，首先重复量太大，而且一旦需要修改就是修改好几十处，我尝试了Route 的onEnter 属性，但是这样也必须在路由中给每个Route都加这个属性，请问各位大神 有没有什么办法，监听到路由变化事件或者是给所有组件同时绑定一个componentWillMount的方法呢？请赐教！

Answer 1

写个HOC呗，下面代码里super的调用和自己的逻辑，顺序可以按自己的情况调整

function HOC(wrapped) {
  return class Enhancer extends wrapped {
    componentWillMount() {
      // 调用wrapped中的componentWillMount
      super.componentWillMount();
      
      // 下面写自己的逻辑。
    }
  }
}

调用的时候，就这么搞：

class Component extends React.Component {
  // bla...bla...bla...
}

export default HOC(Component);

或者高级点

@HOC
export default class Component extends React.Component {
  //...bla...bla...bla
}