牛逼！一个仅为2kb的React数据流状态库

大家好，我是「前端实验室」爱分享的了不起~

今天为大家分享一个全新的数据流方案，在一行代码都不用修改的情况下，达到提升react局部状态为全局共享状态的效果。

helux

helux 是一个鼓励服务注入，并支持响应式变更 react 的全新数据流方案，为了更符合现在流行的 DDD 围绕业务构建领域模型而生。

特点

• 轻量级应用，压缩后大小仅为 2kb
• 简单易上手，仅有 6 个 api
• 高性能，自带依赖收集
• 响应式，支持创建响应式对象，在视图之外变更对象将同步更新视图
• 服务注入，配合useService接口轻松控制复杂业务逻辑，返回稳定的方法引用
• 状态提升 0 改动，所以地方仅需将useObject换为useSharedObject即可提升状态共享到其他组件
• 避免 forwordRef 地狱，内置的exposeService模式将轻松解决父调子时的ref转发晦涩理解问题和传染性（隔代组件需要层层转发）
• ts 友好，100% ts 编写，为你提供全方位类型提示

使用

首先使用npm命令进行安装

npm i helux

然后调用createShared创建共享状态,调用useShared使用共享状态

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