helux 简介

30s 上手

import React from 'react';+ import { atom, useAtom } from 'helux';+ const [sharedState] = atom({ a: 100, b: { b1: 1 } });function HelloHelux(props: any) {-   const [state, setState] = React.useState({ a: 100, b: { b1: 1, b2: 2 } });+   const [state, setState] = useAtom(sharedState);-   const change = setState((prev) => ({ ...prev, b: { ...prev.b, b1: 100 } }));+   const change = setState((draft) => { draft.b.b1 = 100 });  // 收集到当前组件依赖为 a，仅当 a 变更时才触发重渲染  return <div>{state.a}</div>;}

类 pinia 使用

import{defineStore}from'@helux/store-pinia';constcounterStoreCtx=defineStore('Counter',{state:()=>({count:1,mountCount:1}),getters:{// 由 state 派生出 double ，上游依赖不变化时此函数不再重复计算double(){returnthis.count*2;},// 由其他 getters 派生出 plus10 ，上游依赖不变化时此函数不再重复计算plus10(){returnthis.double+10;},},actions:{// 同步方法changeCount(payload:number){this.count=payload;},// 异步方法asyncchangeCountSync(p1:number,p2:number){this.changeCount(p1);awaitdelay();this.count+=p2;},plus(){this.count+=1;},},// lifecyle 里可以访问 actions 调用方法// lifecycle的方法由框架负责调用，在 actions 里是访问不到的（类型上已屏蔽），由框架负责调用lifecycle:{mounted(){// this.changeCount(888);this.mountCount+=1;},},});

部分特性简介

atom

import{atom,useAtom}from'helux';const[numAtom]=atom(1);// { val: 1 }functionDemo(){const[num,setAtom]=useAtom(numAtom);// num 自动拆箱return<h1onClick={setAtom(Math.random())}>{num}</h1>;}

dep tracking

import{useAtom}from'helux';const[objAtom,setObj]=atom({a:1,b:{b1:1}});// 修改草稿，生成具有数据结构共享的新状态，当前修改只会触发 Demo1 组件渲染setObj((draft)=>(draft.a=Math.random()));functionDemo1(){const[obj]=useAtom(objAtom);// 仅当 obj.a 发生变化时才触发重渲染return<h1>{obj.a}</h1>;}functionDemo2(){const[obj]=useAtom(objAtom);// 仅当 obj.b.b1 发生变化时才触发重渲染return<h1>{obj.b.b1}</h1>;}

signal

// 只会引起h1标签内部重渲染<h1>{$(numAtom)}</h1>// 格式化<h1>{$(numAtom,num=>`hi helux${num.val}`)}</h1><h1>{$(numAtom.val,num=>`hi helux${num}`)}</h1>

import{block}from'helux';const[objAtom]=atom({a:1,b:{b1:1}});constUserBlock=block(()=>(<div><h1>{objAtom.a}</h1><h1>{objAtom.b.b1}</h1></div>));// 依赖是 obj.val.a, obj.val.b.b1<UserBlock/>;// 如使用 share 创建共享对象，则 UserBlock 实例的依赖是 obj.a, obj.b.b1const[objAtom]=share({a:1,b:{b1:1}});

mutate derive

import{share,mutate}from'helux';const[shared]=share({a:1,b:0,c:0});mutate(shared)({changeB:(draft)=>(draft.b=shared.a+1),changeC:(draft)=>(draft.c=shared.a+2),});

import{share,mutate}from'helux';const[shared]=share({a:1});const[sharedB]=share({b:0,c:0});mutate(sharedB)({changeB:(draft)=>(draft.b=shared.a+1),changeC:(draft)=>(draft.c=shared.a+2),});

full derive

import{share,derive,deriveAtom,useDerived,useDerivedAtom}from'helux';const[shared]=share({a:1});constresultDict=derive(()=>({num:shared.a+100}));// { num: number }constresultAtom=deriveAtom(()=>shared.a+100);// 自动装箱：{ val: number }const[result]=useDerived(resultDict);// { num: number}const[result]=useDerivedAtom(resultAtom);// 自动拆箱：number

watch

import{watch}from'helux';// 仅观察到a变化才通知回调执行watch(()=>{console.log('a change');},[shared.a]);// shared任意节点变化就通知回调执行watch(()=>{console.log('shared change');},[shared]);

watch(()=>{console.log('a change',shared.a);},{immediate:true},);

📦 了解更多

❤️‍🔥 赞赏