resso
前端
https://github.com/nanxiaobei/resso
The simplest React state manager
- 使用简单
- 非常小巧
- resso实现了按需更新。如果未使用的数据发生变化，则不会触发组件更新。
小试牛刀
npm init vite demo
使用bun作为包管理
bun install v1.0.1 (31aec4eb)
+ @types/react@18.2.21
+ @types/react-dom@18.2.7
+ @typescript-eslint/eslint-plugin@5.62.0
+ @typescript-eslint/parser@5.62.0
+ @vitejs/plugin-react@4.0.4
+ eslint@8.49.0
+ eslint-plugin-react-hooks@4.6.0
+ eslint-plugin-react-refresh@0.3.5
+ typescript@5.2.2
+ vite@4.4.9
+ react@18.2.0
+ react-dom@18.2.0
207 packages installed [140.00ms]
后面安装只需要140mm依赖就安装好了。
bun install resso
import resso from 'resso';
import { Button } from "@arco-design/web-react"
const store = resso({ count: 0, text: 'hello' });
function App() {
const { count } = store;
return (
<>
<h1> {count}</h1>
<Button onClick={()=>{ store.count+=1; }}>+</Button>
<Button onClick={()=>{ store.count-=1; }}>-</Button>
</>
)
}
不同组件使用
store/add.ts
import resso from 'resso';
export const addStore = resso({
count: 0,
addCount: () => {
addStore.count += 1;
}
});
// B.tsx
import { Button } from '@arco-design/web-react'
import { addStore } from './store'
export function CompB(){
let { count, addCount } = addStore;
return <div>
<h1>B组件: </h1>
<h1>{count}</h1>
<Button onClick={()=>{ addCount() }} >+</Button>
</div>
}
import { addStore } from './store'
export function CompA(){
let { count } = addStore;
return <div>
<h1>A组件: </h1>
<h1>{count}</h1>
</div>
}
API
初始化
import resso from 'resso';
const store = resso({
count: 0,
text: 'hello',
inc: () => {
const { count } = store; // 方法中用到的数据 → 须在顶层先解构
store.count = count + 1; // 更改count
},
});
更新
// 更新单个
store.count = 60; // 直接赋值
store('count', (prev) => prev + 1); // 或 更新函数
// 更新多个
store({ count: 60, text: 'world' }); // 直接赋值
// 更新函数
store((prev) => ({
count: prev.count + 1,
text: prev.text === 'hello' ? 'world' : 'hello',
}));
使用
// UI 中用到的数据，须在顶层先解构，因为其实是调用 `useState`
function App() {
const { count } = store; // 须在最顶层，否则将有 React 报错 (Hooks 规则)
}