라이브러리 없는 반응적 상태 관리

간단하고 강력한 상태 처리

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!