Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: mod readme #109

Merged
merged 1 commit into from
Jan 5, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 5 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,32 +36,20 @@
```diff
import React from 'react';
+ import { atom, useAtom } from 'helux';
+ const [ sharedState ] = atom({a:100, b: { b1: 1 }});
+ 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 [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 } }));

// 基于草稿修改,生成结构共享的新数据,
// setState 接受返回值做浅合并,故加 void 是为了消除箭头函数隐式返回值,避免 ts 环境报编译错误
+ const change = setState(draft=>void(draft.b.b1=100));

// 或写为
+ const change = setState(draft=>{
+ draft.b.b1=100;
+ });
- 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>;
}
```

```ts
const [state, setState] = useAtom(sharedState);
```

## 部分特性简介

以下是一些常见特性,更多特性可查阅文档里的[Atom](https://heluxjs.github.io/helux/guide/atom)、[Signal](https://heluxjs.github.io/helux/guide/signal)、[依赖追踪](https://heluxjs.github.io/helux/guide/dep-tracking)、[响应式](https://heluxjs.github.io/helux/guide/reactive)、[双向绑定](https://heluxjs.github.io/helux/guide/sync)、[派生](https://heluxjs.github.io/helux/guide/derive)、[观察](https://heluxjs.github.io/helux/guide/watch)、[Action](https://heluxjs.github.io/helux/guide/action)、[模块化](https://heluxjs.github.io/helux/guide/modular) 等章节做深入了解
Expand Down