???? ?????? ??? ?? ??? ???? ???? ??????? ?? ? ?? ??? ?? ?????. ?? React ? Vue? ?? ?? ?? JavaScript ?????? ?? ?????. ?? ??? ???? ?? ?? ??? ???? ???????. ???? ??? ???? ???? ?? ?? ?? ???? ??? ? ??? ?????? ??? '???' ??? ? ???? ??? ? ????. ??? ?? ??? ???? ?? ???? ??? ??? ????? ??? ? ??? ?????

? ????? JavaScript? ???? ??? ??? ???? ???? ??? ?????? ?? ??? ???????. ???? ???? ??? ?? ? ?? ????? ??? ?? ??? ???????. ???? ???? ???? ???? ??? ??? ??? ????? ????? ??? ??? ??? ??? ??? ??? ? ??? ???. ? ?? ??? ???? ???? ? ??? ?? ?? ???? ????? ??? ? ?? ??? ?????.

??? ??? ??? ???? ?? ?? ??? ???? ??? ???????.

• ??: ??? ???? ??? ?? ???? ???? ?????. ?? ???? ?? ??? ?? ???? ???? ?? ??? ???? ?????.
• ??: ?? ??? ??? ?? ??? ??? ??? ??? ?????.
• ???: ??? ??? ???? ?? ?? ?????. ??? ??? ?? ??? ?? ????? ?????? ???? ?????.

?? ??? ????? ??? ????? ??? Javascript API? ???? ???????.

???: ??? ??? ???? ?? ??? ?? ???? ???? ?? ??(?: ?? ??? ? ??)? ?? ??? ?? ??? ??? ? ????. ? ????? ??? ???(?? ??)? ?? ??? ????? ??? ? ?????.

Reflect: Reflect API? ??? ? ?? JavaScript ??? ?? ???? ?????. ?? ?? ???? Reflect.get ? Reflect.set? ?? ??? ???? ? ????, ?? ?? ???? ??? ?? ??? ????? ?? ??? ? ??? ??? ? ????.

Map: Map ??? ?-? ?? ???? ??????. ??? ?? ?? ??? ??? ? ? ????. ? ????? ? ??? ??? ???? ???? dependencyMap? ???? ? ?????.

?? ?? ??? ??? ???? ??? ?????.

// Let's define a Map object to track our dependencies
const dependencyTrackerMap = new Map();
// The activeEffect variable will hold the currently executing 
// effect function. 
// It will be set when an effect is run and will be used
// to track which effects depend on specific reactive properties. 
let activeEffect = null

// This function will make an object reactive
function reactive(target) {
    return new Proxy(target, {
        get(obj, prop) {
            trackDependency(prop); // Track dependency
            return Reflect.get(obj, prop);
        },
        set(obj, prop, value) {
            const result = Reflect.set(obj, prop, value);
            triggerDependency(prop); // Trigger reactions
            return result;
        }
    });
}

// the effect function will register reactive functions
function effect(fn) {
    activeEffect = fn;
    fn(); // Run the function once to register dependencies
    activeEffect = null;
}

// this function will track dependencies
function trackDependency(key) {
    if (activeEffect) {
        if (!dependencyTrackerMap.has(key)) {
            dependencyTrackerMap.set(key, new Set());
        }
        dependencyTrackerMap.get(key).add(activeEffect);
    }
}

// this function will trigger dependencies
function triggerDependency(key) {
    const deps = dependencyTrackerMap.get(key);
    if (deps) {
        deps.forEach(effect => effect());
    }
}

// This will create a reactive object with an initial state
// count and message here are signals
const state = reactive({ count: 0, message: "Hello" });

??? ??? ? ?? ??? ????.

1. ??? ???? ?? ??? ?? ?? ??? ????? ???? ???? ???? ?? ??? ??????.
2. ??? ???? ??? ??? ???? ?? ??? ??????. ??? ???? ?? ???? ???? ???? ?? ?? activeEffect? ?????.
3. ??? ? ???? ??? ??? ???? ??????. trackDependency ??? ?? ??? ???? ? ?? ??? ??? ?????. ???? dependencyTrackerMap? ?? ??? ?? ??? ??? ?? ??? ?????. ??? TriggerDependency ??? dependencyTrackerMap?? ??? ??? ?? ?? ??? ???? ?? ?? ??? ? ? ??? ?????.

?? ???? ??? ???? ???? ?????.

// Let's define a Map object to track our dependencies
const dependencyTrackerMap = new Map();
// The activeEffect variable will hold the currently executing 
// effect function. 
// It will be set when an effect is run and will be used
// to track which effects depend on specific reactive properties. 
let activeEffect = null

// This function will make an object reactive
function reactive(target) {
    return new Proxy(target, {
        get(obj, prop) {
            trackDependency(prop); // Track dependency
            return Reflect.get(obj, prop);
        },
        set(obj, prop, value) {
            const result = Reflect.set(obj, prop, value);
            triggerDependency(prop); // Trigger reactions
            return result;
        }
    });
}

// the effect function will register reactive functions
function effect(fn) {
    activeEffect = fn;
    fn(); // Run the function once to register dependencies
    activeEffect = null;
}

// this function will track dependencies
function trackDependency(key) {
    if (activeEffect) {
        if (!dependencyTrackerMap.has(key)) {
            dependencyTrackerMap.set(key, new Set());
        }
        dependencyTrackerMap.get(key).add(activeEffect);
    }
}

// this function will trigger dependencies
function triggerDependency(key) {
    const deps = dependencyTrackerMap.get(key);
    if (deps) {
        deps.forEach(effect => effect());
    }
}

// This will create a reactive object with an initial state
// count and message here are signals
const state = reactive({ count: 0, message: "Hello" });

??? ??? ??? ??????? ?? ?? ??? ??????.

//We are using state from the previous snippet:
effect(() => {
    console.log(Count has changed: ${state.count});
});

effect(() => {
    console.log("Message has changed");
    console.log(The new message is: ${state.message});
});

??? ???? ???? ? ?? ?? ????? ???? ????.

? ????? JavaScript? ?? ?? ???? ???? ??? ??? ?? ?? ????(?? ???)? ????? ??? ???????. ? ??? ????? '??'? ??? ??? ????? ??? ?? ?? ??? ???. ???, ??? Proxy? Reflect API? ??? ??? ?? Map ??? ?? ??????.

????? ? ??? ???? ???? ???? ??? ???? ???? ??? ???????. ?? ?? ??? ???? ??? ?????? ???? ?? ??? ?? ??? ????? ???? ??? ? ?? ?????. ? ?? ??? ???? ?? ?? ?? ?? ?? ??? UI? ???? ???? ??? ??????? ??? ? ???? ??? ??? ???? ??? ??? ? ?? ???? ???.

? ??? Javascript? ???? ???? ??? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!