global-context

描述

提供一个全局唯一的context，用在多个webpack 邦联模块系统中，可以避免不同版本导致context获取问题

安装

npm i --save @kne/global-context

概述

Global Context 是一个专为 React 应用设计的全局状态管理解决方案，特别适用于使用多个 Webpack 联邦模块的复杂项目架构。该项目通过提供全局唯一的 Context 实例，有效解决了不同模块版本间 Context 隔离的问题，确保跨模块组件间的数据共享和状态同步。

核心特性

• 提供全局唯一的 Context，支持跨模块数据共享
• 兼容 Webpack 联邦模块系统，避免版本冲突
• 内置选择器模式，优化组件渲染性能
• 支持异步数据加载和预设值配置
• 轻量级设计，无额外依赖，易于集成

适用场景

• 微前端架构中的跨应用状态管理
• 多模块联邦系统中的数据同步需求
• 需要全局配置信息共享的大型 React 项目
• 组件库与业务应用间的参数传递场景

技术亮点 采用 React 18 最新特性，基于 useSyncExternalStore 实现高效的状态订阅机制。通过 Context 隔离和选择器模式，在保证全局状态可访问性的同时，最大化减少了不必要的组件重渲染。项目设计遵循 React 最佳实践，提供完整的 TypeScript 类型支持，确保开发体验和代码质量。

示例

示例代码

• 基础上下文
• 展示Provider和useContext的基本使用方法
• globalContext(@kne/current-lib_global-context)

const {Provider, useContext} = globalContext;

const ChildrenComponent = () => {
    const value = useContext();
    return <div>context value: {JSON.stringify(value)}</div>;
};

const BaseExample = () => {
    return <Provider value={{a: 1}}>
        <div>我是一个示例组件</div>
        <ChildrenComponent/>
    </Provider>;
};

render(<BaseExample/>);

• 全局状态管理
• 使用Global组件管理全局状态，支持预设和异步加载
• globalContext(@kne/current-lib_global-context)

const { Global, GlobalSetting, GlobalValue, Preset } = globalContext;

const BaseExample = () => {
  return <Global preset={{ a: 1 }}>
    <GlobalSetting loader={() => {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({ userName: "Linzp" });
        }, 1000);
      });
    }}>
      userName:<GlobalValue globalKey="userName">{({ value }) => value}</GlobalValue>
    </GlobalSetting>
    <Preset>{({ a }) => a}</Preset>
  </Global>;
};

render(<BaseExample />);

• 性能优化渲染
• 使用useGlobalValue避免不必要的组件重渲染
• globalContext(@kne/current-lib_global-context)

const {Global, useGlobalValue, useContext} = globalContext;

const Children1Component = () => {
    console.log('children1 render');
    const value = useGlobalValue('a');
    return <div>context value.a: {value}</div>;
};

const Children2Component = () => {
    console.log('children2 render');
    const value = useGlobalValue('b');
    return <div>context value.b: {value}</div>;
};

const ChildrenSetValue = () => {
    const {setGlobalValue} = useContext();

    return <div>
        <button onClick={() => {
            setGlobalValue('a', a => a + 1);
        }}>a + 1
        </button>
        <button onClick={() => {
            setGlobalValue('b', b => b + 1);
        }}>b + 1
        </button>
    </div>
};

const BaseExample = () => {
    return <Global initValue={{a: 1, b: 2}}>
        <div>我是一个示例组件</div>
        <Children1Component/>
        <Children2Component/>
        <ChildrenSetValue/>
    </Global>;
};

render(<BaseExample/>);

• 多层级情况
• 多层级情况
• globalContext(@kne/current-lib_global-context)

const {Global, useGlobalValue, useContext} = globalContext;

const ChildrenComponent = ({children}) => {
    const value = useGlobalValue('a');
    const value2 = useGlobalValue('b');
    console.log('ChildrenComponent render');
    return <div>
        context value.a: {value}
        <Global initValue={{a: value, b: value2}}>
            {children}
        </Global>
    </div>;
};

const SetGlobal = () => {
    const {setGlobal} = useContext();
    return <button onClick={() => {
        setGlobal(global => {
            return Object.assign({}, global, {a: global.a + 1});
        })
    }}>a + 1</button>
};

const BaseExample = () => {
    return <>
        <ChildrenComponent/>
        <Global initValue={{a: 1, b: 2}}>
            <ChildrenComponent>
                <ChildrenComponent/>
                <SetGlobal/>
            </ChildrenComponent>
            <SetGlobal/>
            <Global initValue={{a: 10, b: 20}}>
                <ChildrenComponent>
                    <ChildrenComponent/>
                    <SetGlobal/>
                </ChildrenComponent>
                <SetGlobal/>
            </Global>
        </Global>
    </>;
};

render(<BaseExample/>);

API

Global

全局状态管理组件，提供跨模块的数据共享能力。

属性说明

属性名	类型	必填	默认值	说明
preset	object	否	-	预设配置数据
children	ReactNode	是	-	子组件
initValue	object	否	{}	初始全局状态值

GlobalSetting

全局状态设置组件，支持异步数据加载。

属性说明

属性名	类型	必填	默认值	说明
loader	function	是	-	异步加载函数，返回 Promise
needReady	boolean	否	true	是否需要等待加载完成
children	ReactNode	是	-	子组件

GlobalValue

全局状态值渲染组件，通过渲染函数模式获取状态值。

属性说明

属性名	类型	必填	默认值	说明
globalKey	string	是	-	全局状态键名
children	function	是	-	渲染函数，接收 value 参数

Preset

预设配置渲染组件，通过渲染函数模式获取预设值。

属性说明

属性名	类型	必填	默认值	说明
children	function	是	-	渲染函数，接收 preset 参数

createContext

创建 Context 实例的工具函数。

返回值

属性名	类型	说明
context	Context	React Context 对象
Provider	Component	Context Provider 组件
Consumer	Component	Context Consumer 组件
useContext	function	获取 Context 值的 Hook

useSelectorContext

创建选择器 Context 的工具函数，支持细粒度状态订阅。

返回值

属性名	类型	说明
context	Context	React Context 对象
Provider	Component	选择器 Provider 组件
useContext	function	选择器 Hook

useGlobalContext

获取全局 Context 值的 Hook。

返回值

类型	说明
object	包含 global、setGlobal、setGlobalValue 的对象

useGlobalValue

根据键名获取全局状态值的 Hook。

参数

参数名	类型	必填	说明
globalKey	string	是	全局状态键名

返回值

类型	说明
any	对应键名的全局状态值

usePreset

获取预设配置值的 Hook。

返回值

类型	说明
object	预设配置对象

useSelectorContext

使用选择器订阅状态变化的 Hook。

参数

参数名	类型	必填	说明
selector	function	是	选择器函数

返回值

类型	说明
any	选择器函数的返回值