React Hooks对比类组件生命周期的实用优势及函数组件优势咨询

你提到的这种父类封装订阅的方式确实能解决自动取消的问题，但实际用下来，函数组件结合Hooks能带来更灵活、更简洁的解决方案，还有这些额外优势：

• 代码更轻量，心智负担低
  类组件要写构造函数、继承、生命周期方法，模板代码一堆。函数组件就是普通JS函数，不用管this、继承这些东西，写起来特别轻便。比如你的订阅逻辑，用useEffect直接写在组件里就行：

  function SomeComponent() {
    useEffect(() => {
      const callback = () => console.log("Hello World");
      sub("someEvent", callback);
      // 组件卸载时自动执行清理
      return () => unsub("someEvent", callback);
    }, []);
  
    return <div>...</div>;
  }
  

  不用继承父类，逻辑完全内聚在组件里，别人看代码不用跳去父类找逻辑，理解成本低很多。

• 逻辑复用更自由，无侵入性
  父类继承是侵入式的——组件必须继承Base类才能用订阅功能，万一组件已经继承了其他父类，还会有冲突问题。而用自定义Hook封装订阅逻辑：

  function useSubscription(eventName, callback) {
    useEffect(() => {
      sub(eventName, callback);
      return () => unsub(eventName, callback);
    }, [eventName, callback]);
  }
  

  任何函数组件都能直接调用这个Hook，不需要继承，复用自由，还不会污染组件的继承链。

• 避免类继承的陷阱
  类继承很容易出现层级过深、逻辑溯源难的问题，比如多个父类的方法冲突，想找某个方法的来源得翻好几层父类。而函数组件用Hooks组合逻辑，是React推崇的"组合优于继承"实践，每个Hook都是独立的功能模块，组件按需组合，复杂度低很多。

• 更好的打包优化
  函数组件和Hooks都是基于函数的，Webpack这类打包工具更容易做Tree Shaking，把没用到的代码去掉，减少打包体积。类组件的继承关系复杂，打包工具很难判断哪些方法是没用的，优化空间小。

• 跟上React的未来节奏
  React团队一直在主推函数组件和Hooks，新特性比如并发模式、服务端组件都是优先支持函数组件的。类组件虽然不会被废弃，但后续的新功能大概率不会再针对类组件开发，用函数组件能更好地跟上React的更新步伐。

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