The simplest React state manager
npm install ressoLink in bio to widgets,
your online home screen. ➫ 🔗 kee.so
---
最简单的 React 状态管理器。_自动按需 re-render ⚡️_
Reactive Elegant Shared Store Object
(支持 React 18、React Native、SSR、小程序等)
English · 简体中文
- 非常简单 🪩
- 非常聪明 🫙
- 非常小巧 🫧
``sh`
pnpm add ressoor
yarn add ressoor
npm i resso
`jsx
import resso from 'resso';
const store = resso({
count: 0,
text: 'hello',
inc() {
const { count } = store; // 须在顶层解构（若在方法中用到）
store.count = count + 1;
},
});
function App() {
const { count } = store; // 须在顶层解构（若在 UI 中用到）
return (
<>
{count}
);
}
`
\* 顶部解构其实是调用 useState（Hooks 规则，否则将有 React 报错）
更新单个
`jsx
store.count = 60;
store('count', (c) => c + 1);
`
更新多个
`jsx
store({
count: 60,
text: 'world',
});
store((s) => ({
count: s.count + 1,
text: s.text === 'hello' ? 'world' : 'hello',
}));
`
非 state 共享变量 (Refs)
事实上它与 resso 无关，只是 JavaScript。你可以这样做：
`jsx
// store.js
export const refs = {
total: 0,
};
// App.js
import store, { refs } from './store';
function App() {
refs.total = 100;
return
---
\*
批量更新`jsx
resso.config({ batch: ReactDOM.unstable_batchedUpdates }); // 在项目入口
`按需 re-render
jsx
// 没有 text 更新，绝不 re-render
function Text() {
const { text } = store;
return {text}
;
}// 只在 count 更新时 re-render
function Count() {
const { count } = store;
return
{count}
;
}// 没有 state 在 UI 中，绝不 re-render
function Control() {
return (
<>
);
}
``