Reaktives Zustandsmanagement ohne Bibliotheken

Einfache und leistungsstarke Statusverarbeitung

<code class="language-javascript">export class State<IState extends Record<string, unknown>> {
    private data = new Map<keyof IState, IState[keyof IState]>();
    private subscribers = new Map<string, ((...args: any[]) => void)[]>();

    set(name: keyof IState, value: IState[keyof IState]): void {
        this.data.set(name, value);
        this.publish(`change:${String(name)}`, value);
    }

    get(name: keyof IState): IState[keyof IState] | undefined {
        return this.data.get(name);
    }

    has(name: keyof IState): boolean {
        return this.data.has(name);
    }

    clear(): void {
        this.data.clear();
        this.publish('clear');
    }

    publish(name: string, ...args: any[]): void {
        this.subscribers.get(name)?.forEach(fn => fn(...args));
    }

    subscribe(name: string, fn: (...args: any[]) => void): void {
        this.subscribers.has(name)
            ? this.subscribers.get(name)!.push(fn)
            : this.subscribers.set(name, [fn]);
    }

    unsubscribe(name: string, fn: (...args: any[]) => void): void {
        if (this.subscribers.has(name)) {
            const idx = this.subscribers.get(name)!.indexOf(fn);
            if (idx > -1) this.subscribers.get(name)!.splice(idx, 1);
        }
    }

    unsubscribeAll(name: string): void {
        this.subscribers.delete(name);
    }
}</code>

Datenbindung: Echte Reaktionsfähigkeit

React-Integrationsbeispiel

<code class="language-javascript">function UserProfile() {
    const state = new State();

    const [userData, setUserData] = useState({
        name: state.get('name') || '',
        age: state.get('age') || 0
    });

    // 通过状态变化实现自动响应
    state.subscribe('change:name', (newName) => {
        setUserData(prev => ({ ...prev, name: newName }));
    });

    return (
        <div>
            <input type="text" onChange={e => state.set('name', e.target.value)} />
        </div>
    );
}</code>

Warum es besser ist als reaktive Bibliotheken

• Keine externen Abhängigkeiten
• Minimierte Paketgröße
• Native JavaScript-Leistung
• Einfache und intuitive API
• Integrierte Änderungsverfolgung

Wichtige Responsive-Prinzipien

1. Statusänderungen lösen Aktualisierungen aus
2. Abonnenten automatisch benachrichtigen
3. Keine komplexe Stream-Verarbeitung erforderlich
4. Direkter, vorhersehbarer Datenfluss

Fazit

Reactive ist nicht von Bibliotheken abhängig. Es geht darum zu verstehen, wie Daten fließen und sich verändern. Diese Implementierung beweist, dass eine leistungsstarke Zustandsverwaltung in JavaScript integriert ist.

Das obige ist der detaillierte Inhalt vonReaktives Zustandsmanagement ohne Bibliotheken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!