大家好，我是「前端实验室」爱分享的了不起~
今天为大家分享一个全新的数据流方案，在一行代码都不用修改的情况下，达到提升react局部状态为全局共享状态的效果。
helux
helux 是一个鼓励服务注入，并支持响应式变更 react 的全新数据流方案，为了更符合现在流行的 DDD 围绕业务构建领域模型而生。
特点
- 轻量级应用，压缩后大小仅为 2kb
- 简单易上手，仅有 6 个 api
- 高性能，自带依赖收集
- 响应式，支持创建响应式对象，在视图之外变更对象将同步更新视图
- 服务注入，配合useService接口轻松控制复杂业务逻辑，返回稳定的方法引用
- 状态提升 0 改动，所以地方仅需将useObject换为useSharedObject即可提升状态共享到其他组件
- 避免 forwordRef 地狱，内置的exposeService模式将轻松解决父调子时的ref转发晦涩理解问题和传染性（隔代组件需要层层转发）
- ts 友好，100% ts 编写，为你提供全方位类型提示
使用
首先使用npm命令进行安装
npm i helux
然后调用createShared创建共享状态,调用useShared使用共享状态
代码语言：javascript复制import React from 'react';
import { createShared, useShared } from 'helux';
const { state: sharedObj } = createShared({a:100, b:2});
function HelloHelux(props: any) {
const [state, setState] = useShared(sharedObj);
return <div>{state.a}</div>; // 当前组件仅依赖a变更才触发重渲染
}
API使用
useObject
使用useObject时方便定义多个状态值时，可以少写 useState
// 基于对象初始化一个视图状态
const [state, setState] = useObject({a:1});
// 基于函数初始化一个视图状态
const [state, setState] = useObject(()=>({a:1}));
useForceUpdate
useForceUpdate 用来强制更新当前组件视图，某些特殊的场景可以使用它来做视图重刷新
const forUpdate = useForceUpdate();
createSharedObject
createSharedObject 创建一个共享对象，可透传给 useSharedObject
// 初始化一个共享对象
const sharedObj = createSharedObject({a:1, b:2});
// 基于函数初始化一个共享对象
const sharedObj = createSharedObject(()=>({a:1, b:2}));
createReactiveSharedObject
createReactiveSharedObject 创建一个响应式的共享对象，可透传给 useSharedObject
// 初始化一个共享对象
const [reactiveObj, setState] = createReactiveSharedObject({a:1, b:2});
sharedObj.a = 111; // 任意地方修改 a 属性，触发视图渲染
setSharedObj({a: 111}); // 使用此方法修改 a 属性，同样也能触发视图渲染，深层次的数据修改可使用此方法
极致的简单是 helux 最大的优势，了解这几个api 后，就可以轻松应付任何复杂场景，更多详细内容，可以查看官方文档
https://github.com/tnfe/hel/tree/main/packages/helux
