大家好,我是「前端实验室」
爱分享的了不起~
今天为大家分享一个全新的数据流方案,在一行代码都不用修改的情况下,达到提升react
局部状态为全局共享状态的效果。
helux 是一个鼓励服务注入,并支持响应式变更 react 的全新数据流方案,为了更符合现在流行的 DDD 围绕业务构建领域模型而生。
首先使用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变更才触发重渲染
}
使用useObject
时方便定义多个状态值时,可以少写 useState
// 基于对象初始化一个视图状态
const [state, setState] = useObject({a:1});
// 基于函数初始化一个视图状态
const [state, setState] = useObject(()=>({a:1}));
useForceUpdate
用来强制更新当前组件视图,某些特殊的场景可以使用它来做视图重刷新
const forUpdate = useForceUpdate();
createSharedObject
创建一个共享对象,可透传给 useSharedObject
// 初始化一个共享对象
const sharedObj = createSharedObject({a:1, b:2});
// 基于函数初始化一个共享对象
const sharedObj = createSharedObject(()=>({a:1, b:2}));
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