问题场景:
项目 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 的版本即可