当你依赖的包升级时，你必须跟着升级吗？？？

问题场景：

项目 A 依赖了组件 B，组件 B 依赖了组件 C，组件 C 每次升级版本号，B 都得重新发包，跟着升级一个版本号，最后再将 A 依赖的 B 的版本修改。

这样做确实适合很多场景，但是！！！如果当 C 组件频繁升级，而 B 组件并没有针对 C 这次升级要做相应逻辑改动的诉求，只是配合升一下版本号，那么 B 为了配合升级而被迫自己也升级的问题就会很麻烦。因为任何改动都要回归呀😭

现在的依赖关系如下：

---

方案分析：

能不能让 A 直接依赖 C 呢？
Of course！

理想的依赖关系如下：

解决方案：

涉及知识点：高阶组件、peer dependencies

项目 B 中，以前直接引入 C 组件，对 C 包装后导出 B 组件。现在改成导出一个方法，该方法接收一个组件，然后一个新组件。这其实就是高阶组件。

// B组件代码

import React, { useEffect } from 'react';

export const withComponent = (Component) => {

  // eslint-disable-next-line react/display-name
  return () => {
    const WrappedComponent = (
      <div>
        <div>hello, this is B</div>
        <Component />
      </div>
    );

    useEffect(() => {
      // 这里经常处理埋点、打印日志
      console.log('B mounted');
      return () => {
        console.log('B unmounted');
      }
    }, []);

    return WrappedComponent;
  }
}

export default withComponent;

// A 项目代码
import React from 'react';
import { C } from './C';
import { withComponent } from './B';

export const A = () => {
  const NewC = withComponent(C);
  return (
    <>
      <NewC/>
    </>
  )
}

export default A;

最后渲染出来的效果就是这样的

相应的，A 的package.json需做相应修改：

B 的 package.json 也做修改：

这样，以后 C 升级小版本时，B 就不用跟着升级了～，A 直接升级依赖的 C 的版本即可