NanoStores 使用指南

NanoStores 使用指南

nanostoresA tiny (298 bytes) state manager for React/RN/Preact/Vue/Svelte with many atomic tree-shakable stores项目地址:https://gitcode.com/gh_mirrors/na/nanostores

项目介绍

NanoStores 是一个轻量级的状态管理库，适用于 React、React Native、Preact、Vue、Svelte、Solid、Lit、Angular 以及纯JavaScript项目。它通过原子化的存储单元和直接操作，提供了一种简洁高效的管理状态的方式。该库非常小巧，压缩后的大小介于265到814字节之间，并且没有依赖项。NanoStores 利用Size Limit来控制其体积，确保高效性。它设计成可树摇（Tree-Shakable），仅打包组件实际使用的存储单元，加强了逻辑从组件迁移到存储的模式，同时提供了良好的TypeScript支持。

项目快速启动

要开始使用NanoStores，首先通过npm安装：

npm install nanostores

随后，你可以创建原子化存储（Atom）:

// store/users.ts
import { atom } from 'nanostores';
export const $users = atom<User[]>([]);
export function addUser(user: User) {
    $users.set([...$users.get(), user]);
}

在React中使用这个存储：

// components/admins.tsx
import { useStore } from '@nanostores/react';
import { $admins } from './stores/admins'; // 假设这里已定义好基于$users的$admins计算店

export const Admins = () => {
    const admins = useStore($admins);
    return (
        <ul>
            {admins.map(user => <UserItem user={user} />)}
        </ul>
    );
};

应用案例和最佳实践

分离变化与反应

推荐的做法是将状态的变化与UI的更新清晰分离。例如，利用原子存储处理数据变化，而让React等框架自动处理视图的更新。

移动逻辑至存储

将业务逻辑如过滤或计算放入计算型存储（Computed Stores），如上文 $admins 的例子所示，这样可以减少组件内的复杂性。

典型生态项目

NanoStores 设计得十分灵活，与多个前端框架和库都能良好集成。例如，在Lit中可以借助@nanostores/lit轻松实现数据绑定：

// Lit Example
import { StoreController } from '@nanostores/lit';
import {$profile} from './stores/profile';

@customElement('my-header')
class MyHeader extends LitElement {
    @property({type: Object}) private profileCtrl = new StoreController(this, $profile);

    render() {
        return html`<header>Hi ${this.profileCtrl.value.name}</header>`;
    }
}

对于Angular，可以通过@nanostores/angular进行状态管理：

// Angular Example
import { NanostoresService, useStore } from '@nanostores/angular';

@Component({
    selector: 'app-user-detail',
    templateUrl: './user-detail.component.html'
})
export class UserDetailComponent implements OnInit {
    constructor(private storeService: NanostoresService) {}

    ngOnInit() {
        this.user = useStore(this.storeService.$user);
    }

    // ...其他逻辑
}

这些实例展示了NanoStores如何简化状态管理和跨框架的适用性，使开发者能够更加集中精力在业务逻辑上，而不是状态管理的复杂性上。

nanostoresA tiny (298 bytes) state manager for React/RN/Preact/Vue/Svelte with many atomic tree-shakable stores项目地址:https://gitcode.com/gh_mirrors/na/nanostores