Bina stor reaktif dari awal menggunakan Javascript

Pengaturcaraan reaktif ialah pendekatan kemas yang membolehkan anda mencipta aplikasi yang mencerminkan perubahan data secara dinamik. Ia merupakan teknologi teras di sebalik banyak rangka kerja JavaScript moden seperti React dan Vue - ia dikemas kini sebagai tindak balas kepada tindakan pengguna atau perubahan keadaan lain. Memahami apa yang ada di bawah hud kereaktifan boleh terasa seperti terlalu banyak kerja, rasanya seperti salah satu abstraksi 'ajaib' yang digunakan oleh rangka kerja itu. Tetapi bagaimana jika anda boleh membina sistem reaktif kecil sendiri untuk melihat cara ia berfungsi sebenarnya?

Artikel ini akan membincangkan asas pengaturcaraan reaktif dengan membina stor reaktif mudah dari awal dalam JavaScript. Kami akan menelusuri konsep utama, termasuk penjejakan pergantungan dan kemas kini automatik, dalam pelaksanaan yang minimum. Pada akhirnya, anda seharusnya dapat memahami cara membuat struktur data reaktif yang secara automatik menjejak kebergantungan dan mencetuskan kemas kini apabila keadaan berubah. Pendekatan ini akan membantu anda memahami kereaktifan dan akan memberi anda alat untuk mencubanya sendiri dan mungkin menerapkannya pada projek anda.

Mari kita mulakan dengan melihat komponen teras sistem reaktif yang akan kita gunakan:

• Kesan: Fungsi yang berjalan secara automatik sebagai tindak balas kepada perubahan dalam data reaktif. Ia didaftarkan menggunakan fungsi kesan, yang menjejaki kebergantungan pada sebarang isyarat yang diakses.
• Isyarat: Sifat data reaktif yang memberitahu kesan bergantung apabila nilainya berubah.
• Pergantungan: Hubungan antara isyarat dan kesan yang bergantung padanya. Ketergantungan dijejaki supaya perubahan dalam isyarat mencetuskan kemas kini kepada kesan yang berkaitan.

Sekarang kita sudah melepasi definisi pengaturcaraan reaktif, mari kita sebutkan juga API Javascript yang akan kita gunakan:

Proksi: Objek Proksi membenarkan anda mencipta proksi untuk objek lain, membolehkan anda mentakrifkan gelagat tersuai untuk operasi asas (seperti akses dan penetapan harta benda). Dalam kod ini, ia digunakan untuk menjadikan stor reaktif (objek keadaan) responsif kepada perubahan.

Refleksi: Reflect API menyediakan kaedah untuk operasi JavaScript yang boleh dipintas. Ia digunakan untuk melaksanakan operasi seperti Reflect.get dan Reflect.set dalam fungsi reaktif, yang membenarkan proksi mengendalikan akses dan penetapan harta sambil mengekalkan gelagat asal objek.

Peta: Objek Peta ialah koleksi yang memegang pasangan nilai kunci, yang mana kunci boleh berupa sebarang jenis data. Ia digunakan dalam pelaksanaan ini untuk mencipta dependencyMap, yang menjejaki kebergantungan yang dikaitkan dengan setiap isyarat.

Sekarang, mari kita mula mentakrifkan rupa keadaan awal kita:

// 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" });

Jadi, inilah yang telah kami lakukan:

1. Kami mencipta fungsi reaktif yang mengambil objek dan mengembalikan Proksi yang akan menjejaki perubahan yang akan dilakukan pada objek pada masa hadapan
2. Kami mencipta fungsi kesan yang mendaftarkan fungsi reaktif yang bergantung pada keadaan. Apabila kesan ditakrifkan, ia berjalan serta-merta untuk mendaftarkan sebarang kebergantungan dan menetapkan activeEffect sewajarnya.
3. Kami mencipta penjejak pergantungan yang terdiri daripada tiga bahagian: fungsi trackDependency menyemak sama ada terdapat kesan aktif apabila sifat reaktif diakses. Jika ya, ia menambahkan kesan itu pada set kebergantungan untuk sifat yang sepadan dalam dependencyTrackerMap. Seterusnya, fungsi triggerDependency mendapatkan semula set kesan bergantung yang dikaitkan dengan harta daripada dependencyTrackerMap dan melaksanakan setiap daripadanya apabila nilai harta berubah.

Sekarang, mari buat kesan dengan panggilan balik dan cuba cetuskannya:

// 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" });

Log konsol akan dicetuskan apabila kami cuba mengemas kini keadaan yang telah kami buat:

//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});
});

Berikut ialah sedikit visualisasi tentang perkara yang berlaku apabila kebergantungan dicetuskan:

---

Dalam artikel ini, kami meneroka cara mencipta sistem reaktif asas dalam JavaScript, mendayakan kemas kini automatik (atau kesan sampingan) sebagai tindak balas kepada perubahan dalam data. Pelaksanaan ini berfungsi sebagai pengenalan kepada konsep pengaturcaraan reaktif, yang merupakan sebahagian daripada rangka kerja 'ajaib'. Selain itu, kami telah mempelajari perkara yang dilakukan oleh Proxy and Reflect API, dan menggunakannya, serta objek Map.

Ringkasnya, sistem reaktif ini mengurus kebergantungan dan mengemas kini kesan secara automatik apabila keadaan berubah. Dengan mendaftarkan fungsi yang bergantung pada sifat reaktif tertentu, sistem menjejaki fungsi yang bergantung pada sifat mana, menjalankannya semula apabila diperlukan. Pendekatan ini membolehkan untuk mencipta aplikasi responsif di mana perubahan keadaan ditunjukkan secara automatik dalam UI tanpa kod tambahan, meningkatkan pengalaman pembangun dan menjadikan pengendalian data lebih mudah dan cekap.

Atas ialah kandungan terperinci Bina stor reaktif dari awal menggunakan Javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!