Penggunaan Object.assign() dalam kod sumber Zustand.

Dalam artikel ini, kita akan memahami cara Object.assign() digunakan dalam kod sumber Zustand.

Coretan kod di atas adalah daripada vanilla.ts, apabila anda menetapkan keadaan, Object.assign digunakan untuk mengemas kini objek keadaan anda.

Mari kita fahami asas Object.assign:

Object.assign()

Kaedah statik Object.assign() menyalin semua sifat sendiri yang boleh dikira daripada satu atau lebih objek sumber kepada objek sasaran. Ia mengembalikan objek sasaran yang diubah suai.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget === target);
// Expected output: true

nilai b dalam objek sasaran digantikan dengan nilai b dalam objek sumber.

Memang mudah kan? mari kita jalankan beberapa percubaan dan fahami cara setState Zustand memanfaatkan kaedah Object.assign().

Object.assign() dalam kod sumber Zustand:

// pulled from: https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76
state = (replace != null ? 
              replace : 
              typeof nextState !== "object" || 
              nextState === null) ? 
                nextState : 
                Object.assign({}, state, nextState);

Itu operator ternary bersarang di sana dalam coretan kod di atas. jika penggantian itu bukan nol, keadaan akan digantikan atau jika nextState bukan objek, hanya kembalikan nextState sebagaimana adanya tetapi perkara yang kami minati ialah Object.assign({}, state, newState).

Mari kita log dahulu dan lihat apa yang ada dalam keadaan dan nextState apabila anda mengemas kini keadaan anda. Contoh yang saya pilih adalah daripada contoh demo dalam kod sumber Zustand. Saya mengubah suai kod sedikit supaya kita boleh meletakkan beberapa pernyataan konsol dan menjalankan percubaan ini.

Dalam contoh mudah ini, apabila kiraan ditambah, ia datang untuk mengemas kini objek keadaan menggunakan Object.assign.

Lain kali, anda cuba melakukan beberapa kemas kini pada objek JSON anda, gunakan Object.assign.

Tentang kami:

Di Think Throo, kami berada dalam misi untuk mengajar amalan terbaik yang diilhamkan oleh projek sumber terbuka.

10x kemahiran pengekodan anda dengan mempraktikkan konsep seni bina lanjutan dalam Next.js/React, pelajari amalan terbaik dan bina projek gred pengeluaran.

Kami adalah sumber terbuka — https://github.com/thinkthroo/thinkthroo (Beri kami bintang!)

Ingin membina sistem web yang dipesan lebih dahulu untuk perniagaan anda? Hubungi kami di hello@thinkthroo.com

Mengenai pengarang:

Hei, saya Ram. Saya seorang jurutera perisian/OSS Tinkerer yang bersemangat.

Lihat tapak web saya: https://www.ramunarasinga.com/

Rujukan:

1. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Atas ialah kandungan terperinci Penggunaan Object.assign() dalam kod sumber Zustand.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!