Link in bio to **widgets**,
your online **home screen**. ➫ [🔗 kee.so](https://kee.so/)
---
🪢 resso
最简单的 React 状态管理器。_自动按需 re-render ⚡️_
**R**eactive **E**legant **S**hared **S**tore **O**bject
(支持 React 18、React Native、SSR、小程序等)
[](https://www.npmjs.com/package/resso)
[](https://github.com/nanxiaobei/resso/actions/workflows/test.yml)
[](https://bundlephobia.com/result?p=resso)
[](https://github.com/nanxiaobei/resso/blob/main/src/index.ts)
[](https://github.com/nanxiaobei/resso/blob/main/LICENSE)
[English](./README.md) · 简体中文
## 介绍
[resso，世界上最简单的 React 状态管理器 →](https://zhuanlan.zhihu.com/p/468417292)
## 特性
- 非常简单 🪩
- 非常聪明 🫙
- 非常小巧 🫧
## 示例
[](https://codesandbox.io/s/resso-ol8dn?file=/src/App.jsx)
## 安装
```sh
pnpm add resso
# or
yarn add resso
# or
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 报错）
## API
**更新单个**
```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 ;
}
```
---
**\* `react<18` 批量更新**
```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 (
<>
);
}
```
## 协议
[MIT License](https://github.com/nanxiaobei/resso/blob/main/LICENSE) (c) [nanxiaobei](https://lee.so/)