Javascript is required
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 规则)
}

参考

https://github.com/leftstick/react-resso-memory-game