ライブラリを使用しないリアクティブステート管理

シンプルかつ強力なステータス処理

<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>

データ バインディング: 真の応答性

React 統合の例

<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>

リアクティブ ライブラリより優れている理由

• 外部依存関係なし
• 最小化されたパッケージサイズ
• ネイティブ JavaScript のパフォーマンス
• シンプルで直感的な API
• 組み込みの変更追跡

応答性の重要な原則

1. ステータスの変更により更新がトリガーされます
2. 購読者に自動的に通知します
3. 複雑なストリーム処理は必要ありません
4. 直接的で予測可能なデータ フロー

結論

Reactive はライブラリに依存しません。データがどのように流れ、変化するかを理解することが重要です。この実装は、強力な状態管理が JavaScript にネイティブであることを証明しています。

以上がライブラリを使用しないリアクティブステート管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。