背景
在复杂的UI组件库中，组件间需要共享状态和配置，直接的props传递会导致组件层级过深，Context模式提供了一种优雅的解决方案。
问题驱动
遇到了什么问题？
- 多层级组件间传递配置信息
- 全局状态（如禁用、尺寸）的统一管理
- 避免props drilling（props钻取）
为什么现有方案不够好？
传统的props传递方式在多层级组件中维护困难。
解决方案
Context设计模式
// 创建ContextexportconstconfigProviderKey:InjectionKey<ConfigProviderInnerProps>=Symbol('configProvider');// 提供者exportconstuseConfigContextProvider=(props:ConfigProviderInnerProps)=>{returnprovide(configProviderKey,props);};// 注入者exportconstuseConfigContextInject=()=>{returninject(configProviderKey,defaultConfigProvider);};// 使用示例const{prefixCls,direction,size}=useConfigInject('button',props);多Context组合使用
// 尺寸ContextexportconstSizeContext=createContext<SizeType>('middle');// 禁用ContextexportconstDisabledContext=createContext<boolean>(false);// 在组件中组合使用constsizeContext=useInjectSize();constdisabledContext=useInjectDisabled();constconfigProvider=useConfigContextInject();constmergedSize=computed(()=>props.size||sizeContext.value);constmergedDisabled=computed(()=>props.disabled||disabledContext.value);实现细节亮点
类型安全
使用TypeScript的InjectionKey确保类型安全。
默认值处理
提供合理的默认值，确保组件在未被Context包裹时也能正常工作。
性能优化
使用computed属性实现响应式，避免不必要的重渲染。
