README.zh-CN.md

Create now ➫ 🔗 kee.so

---

🪢 resso

最简单的 React 状态管理器

自动按需 re-render ⚡️

---

Reactive Elegant Shared Store Object

(支持 React 18、React Native、SSR、小程序等)

English · 简体中文

---

介绍

resso，世界上最简单的 React 状态管理器 →

特性

• 非常简单 🪩
• 非常聪明 🫙
• 非常小巧 🫧

安装

pnpm add resso
# or
yarn add resso
# or
npm i resso

使用

import resso from 'resso';

const store = resso({ count: 0, text: 'hello' });

function App() {
  const { count } = store; // UI 中用到的数据 → 须在顶层先解构 🥷
  return (
    <>
      {count}
      <button onClick={() => (store.count += 1)}>+</button>
    </>
  );
}

API

初始化

import resso from 'resso';

const store = resso({
  count: 0,
  text: 'hello',
  inc: () => {
    const { count } = store; // 方法中用到的数据 → 须在顶层先解构，同样 🥷
    store.count = count + 1;
  },
});

更新

// 更新单个
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 规则)
}

---

* react<18 批量更新

// 在 react<18 时使用批量更新：
resso.config({ batch: ReactDOM.unstable_batchedUpdates }); // 在项目入口

按需 re-render

// 没有 text 更新，绝不 re-render
function Text() {
  const { text } = store;
  return <p>{text}</p>;
}

// 只在 count 更新时 re-render
function Count() {
  const { count } = store;
  return <p>{count}</p>;
}

// 没有 data 在 UI 中，绝不 re-render
function Control() {
  return (
    <>
      <button onClick={store.inc}>+</button>
      <button onClick={() => (store.count -= 1)}>-</button>
    </>
  );
}

协议

MIT License (c) nanxiaobei