Skip to content

Commit

Permalink
build(3.6.2): see changelog
Browse files Browse the repository at this point in the history
  • Loading branch information
@fantasticsoul
fantasticsoul committed Dec 31, 2023
1 parent 18f156f commit 1c561b9
Show file tree
Hide file tree
Showing 15 changed files with 241 additions and 148 deletions.
13 changes: 6 additions & 7 deletions docs-src/docs/guide/atom.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ order: 2

# atom

阅读此章节可快速了解`atom`接口简单用法，更多使用方式请查阅[atom接口文档](xx)。
阅读此章节可快速了解`atom`接口简单用法，更多使用方式请查阅[atom 接口文档](xx)。

## 定义共享状态

Expand All @@ -31,13 +31,12 @@ console.log(sharedObj); // sharedObj: {info: { born: 2023 }}
优先考虑 share 共享字典对象，由于`share`接口没有装箱`{val: T}` 的操作，当共享对象为 `object` 时，可优先使用`share`来共享对象，避免一些无自动拆箱的场景多做一次`.val`取值操作
:::


## 修改共享状态

钩子 `useAtom` 返回一个元组，使用方式完全对齐 `react.useState` 接口，react 用户可 0 成本上手此方式，在组件内使用`useAtom`接口来获得组件内使用的共享对象，数据变更后自动通知组件重渲染

```tsx | pure
import { atom, useAtom } from 'helux';
import { useAtom } from 'helux';
const [numAtom] = atomx(1);

function Demo() {
Expand All @@ -60,7 +59,7 @@ export default function Demo() {

```tsx | pure
import { atom, useAtom } from 'helux';
const [numAtom, setAtom] = atom(1);
const [numAtom, setAtom] = atom(1);

function Demo() {
const [num] = useAtom(numAtom);
Expand All @@ -70,7 +69,7 @@ function Demo() {

```tsx
import { atom, useAtom } from 'helux';
const [numAtom, setAtom] = atom(1);
const [numAtom, setAtom] = atom(1);

export default function Demo() {
const [num] = useAtom(numAtom);
Expand All @@ -81,7 +80,7 @@ export default function Demo() {
可使用`ctx.useState`来简化`useAtom(xxxState)`写法，`ctx`来自于`atom`返回的元组第三位参数、或`atomx`接口返回结果

```tsx | pure
import { atom, useAtom } from 'helux';
import { atom } from 'helux';
const [numAtom, setAtom, ctx] = atom(1);
// or
const ctx = atomx(1);
Expand All @@ -92,7 +91,7 @@ function Demo() {
```

```tsx
import { atomx, useAtom } from 'helux';
import { atomx } from 'helux';
const ctx = atomx(1);

function Demo() {
Expand Down
78 changes: 46 additions & 32 deletions docs-src/docs/guide/dep-tracking.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,10 @@ order: 4
组件时读取数据节点值时就产生了依赖，这些依赖被收集到`helux`内部为每个组件创建的实例上下文里暂存着，作为更新凭据来使用。

```tsx | pure
import { useAtom } from 'helux';
const { state, setDraft, useState } = atomx({ a: 1, b: { b1: 1 } });

// 修改草稿，生成具有数据结构共享的新状态，当前修改只会触发 Demo1 组件渲染
const changeObj = ()=> setDraft((draft) => draft.a = Math.random());
const changeObj = () => setDraft((draft) => (draft.a = Math.random()));

function Demo1() {
const [obj] = useState();
Expand All @@ -34,11 +33,11 @@ function Demo2() {
```

```tsx
import { Entry, MarkUpdate } from '@helux/demo-utils';
import { atomx } from 'helux';
import { MarkUpdate, Entry } from '@helux/demo-utils';

const { state, setDraft, useState } = atomx({ a: 1, b: { b1: 1 } });
const changeObj = ()=> setDraft((draft) => draft.a = Math.random());
const changeObj = () => setDraft((draft) => (draft.a = Math.random()));

function Demo1() {
const [obj, , info] = useState();
Expand All @@ -50,7 +49,7 @@ function Demo2() {
return <MarkUpdate info={info}>{obj.b.b1}</MarkUpdate>;
}

export default ()=>(
export default () => (
<Entry fns={[changeObj]}>
<Demo1 />
<Demo1 />
Expand All @@ -66,47 +65,53 @@ export default ()=>(

```tsx | pure
import { atomx } from 'helux';
import { MarkUpdate, Entry } from '@helux/demo-utils';

const { state, setDraft, useState } = atomx({ a: 1, b: { b1: 1 } });
const changeA = ()=> setDraft((draft) => draft.a += 1);
const changeB = ()=> setDraft((draft) => draft.a.b1 += 1);
const changeA = () => setDraft((draft) => (draft.a += 1));
const changeB = () => setDraft((draft) => (draft.a.b1 += 1));

function Demo1() {
const [obj] = useState();
// 大于 3 时，依赖为 a, b.b1
if(obj.a>3){
return <h1>{obj.a} - {obj.b.b1}</h1>;
if (obj.a > 3) {
return (
<h1>
{obj.a} - {obj.b.b1}
</h1>
);
}

return <h1>{obj.a}</h1>;
}
```

:::tip
先点击下述示例`changeB1`按钮，发现并不会触发重渲染，然后再点击`plusA`按钮，待到`a`值大于3时，点击`changeB1`按钮，此时组件将被重渲染，点击`minusA`按钮，待到`a`值小于3时，点击`changeB1`按钮，此时组件将被不被重渲染
先点击下述示例`changeB1`按钮，发现并不会触发重渲染，然后再点击`plusA`按钮，待到`a`值大于 3 时，点击`changeB1`按钮，此时组件将被重渲染，点击`minusA`按钮，待到`a`值小于 3 时，点击`changeB1`按钮，此时组件将被不被重渲染
:::


```tsx
import { Entry, MarkUpdate } from '@helux/demo-utils';
import { atomx } from 'helux';
import { MarkUpdate, Entry } from '@helux/demo-utils';

const { state, setDraft, useState } = atomx({ a: 1, b: { b1: 1 } });
const plusA = ()=> setDraft((draft) => draft.a += 1);
const minusA = ()=> setDraft((draft) => draft.a -= 1);
const changeB1 = ()=> setDraft((draft) => draft.b.b1 = Date.now());
const plusA = () => setDraft((draft) => (draft.a += 1));
const minusA = () => setDraft((draft) => (draft.a -= 1));
const changeB1 = () => setDraft((draft) => (draft.b.b1 = Date.now()));

function Demo1() {
const [obj,,info] = useState();
if(obj.a>3){
return <MarkUpdate info={info}>{obj.a} - {obj.b.b1}</MarkUpdate>;
const [obj, , info] = useState();
if (obj.a > 3) {
return (
<MarkUpdate info={info}>
{obj.a} - {obj.b.b1}
</MarkUpdate>
);
}

return <MarkUpdate info={info}>{obj.a}</MarkUpdate>;
}

export default ()=>(
export default () => (
<Entry fns={[plusA, minusA, changeB1]}>
<Demo1 />
<Demo1 />
Expand All @@ -120,12 +125,16 @@ export default ()=>(

```tsx | pure
import { atomx } from 'helux';
import { MarkUpdate, Entry, noop } from '@helux/demo-utils';

const { state, setDraft, useState } = atomx({ a: 1, b: { b1: { b2: 1, ok: true } } });
const changeB1 = ()=> setDraft((draft) => draft.b.b1 = {...draft.b.b1} );
const changeB1_Ok_oldValue = ()=> setDraft((draft) => draft.b.b1.ok = draft.b.b1.ok );
const changeB1_Ok_newValue = ()=> setDraft((draft) => draft.b.b1.ok = !draft.b.b1.ok );
const { state, setDraft, useState } = atomx({
a: 1,
b: { b1: { b2: 1, ok: true } },
});
const changeB1 = () => setDraft((draft) => (draft.b.b1 = { ...draft.b.b1 }));
const changeB1_Ok_oldValue = () =>
setDraft((draft) => (draft.b.b1.ok = draft.b.b1.ok));
const changeB1_Ok_newValue = () =>
setDraft((draft) => (draft.b.b1.ok = !draft.b.b1.ok));

// 调用 changeB1_Ok_oldValue changeB1 Demo1 不会被重渲染
// 调用 changeB1_Ok_newValue ，Demo1 被重渲染
Expand All @@ -136,20 +145,25 @@ function Demo1() {
```

```tsx
import { Entry, MarkUpdate } from '@helux/demo-utils';
import { atomx } from 'helux';
import { MarkUpdate, Entry, noop } from '@helux/demo-utils';

const { state, setDraft, useState } = atomx({ a: 1, b: { b1: { b2: 1, ok: true } } });
const changeB1 = ()=> setDraft((draft) => draft.b.b1 = {...draft.b.b1} );
const changeB1_Ok_oldValue = ()=> setDraft((draft) => draft.b.b1.ok = draft.b.b1.ok );
const changeB1_Ok_newValue = ()=> setDraft((draft) => draft.b.b1.ok = !draft.b.b1.ok );
const { state, setDraft, useState } = atomx({
a: 1,
b: { b1: { b2: 1, ok: true } },
});
const changeB1 = () => setDraft((draft) => (draft.b.b1 = { ...draft.b.b1 }));
const changeB1_Ok_oldValue = () =>
setDraft((draft) => (draft.b.b1.ok = draft.b.b1.ok));
const changeB1_Ok_newValue = () =>
setDraft((draft) => (draft.b.b1.ok = !draft.b.b1.ok));

function Demo1() {
const [obj,,info] = useState();
const [obj, , info] = useState();
return <MarkUpdate info={info}>obj.b.b1.ok {`${obj.b.b1.ok}`}</MarkUpdate>;
}

export default ()=>(
export default () => (
<Entry fns={[changeB1, changeB1_Ok_oldValue, changeB1_Ok_newValue]}>
<Demo1 />
<Demo1 />
Expand Down
38 changes: 23 additions & 15 deletions docs-src/docs/guide/quick-start.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,44 +17,52 @@ order: 1
import { atom } from 'helux';

// 原始类型 atom
const [ numAtom ] = atom(1);
const [numAtom] = atom(1);
// 字典对象类型 atom
const [ objAtom ] = atom({a:1,b:{b1:1}});
const [objAtom] = atom({ a: 1, b: { b1: 1 } });
```

## 修改 atom

原始值修改

```ts
const [ numAtom, setAtom ] = atom(1);
const [numAtom, setAtom] = atom(1);
setAtom(100);
```

字典对象修改，基于回调的草稿对象直接修改即可

```ts
const [ numAtom, setAtom ] = atom({a:1,b:{b1:1}});
setAtom(draft=> { // draft 已拆箱 { val: T } 为 T
const [numAtom, setAtom] = atom({ a: 1, b: { b1: 1 } });
setAtom((draft) => {
// draft 已拆箱 { val: T } 为 T
draft.b.b1 += 1;
});
```


## 观察 atom

可观察整个根对象变化，也可以观察部分节点变化

```ts
import { atom, watch, getSnap } from 'helux';

watch(()=>{
console.log(`change from ${getSnap(numAtom).val} to ${numAtom.val}`);
}, ()=>[atom]);
watch(
() => {
console.log(`change from ${getSnap(numAtom).val} to ${numAtom.val}`);
},
() => [atom],
);

watch(()=>{
console.log(`change from ${getSnap(numAtom).val.b.b1} to ${numAtom.val.b.b1}`);
}, ()=>[objAtom.val.b.b1]);
watch(
() => {
console.log(
`change from ${getSnap(numAtom).val.b.b1} to ${numAtom.val.b.b1}`,
);
},
() => [objAtom.val.b.b1],
);
```

## 派生 atom
Expand All @@ -66,8 +74,8 @@ watch(()=>{
```ts
import { atom, derive } from 'helux';

const [ numAtom, setAtom ] = atom(1);
const plus100 = derive(()=> atom.val + 100);
const [numAtom, setAtom] = atom(1);
const plus100 = derive(() => atom.val + 100);

setAtom(100);
console.log(plus100); // { val: 200 }
Expand Down Expand Up @@ -101,7 +109,7 @@ console.log(objAtom2.val.plusA100); // 200
react 组件通过`useAtom` 钩子可使用 atom 共享对象，该钩子返回一个元组，使用方式完全对齐 `react.useState` 接口，react 用户可 0 成本上手此方式

```tsx | pure
import { atom, useAtom } from 'helux';
import { useAtom } from 'helux';
const [numAtom] = atomx(1);

function Demo() {
Expand Down
Loading

0 comments on commit 1c561b9

Please sign in to comment.