setState dalam kod sumber negeri.

Dalam artikel ini, saya akan memberikan ulasan tentang cara setState dalam kod sumber Zustand ditulis/berfungsi. Konsep ini memanfaatkan penutupan dalam JavaScript dan fungsi anak panah.

Jenis StoreApi adalah lurus ke hadapan.

export interface StoreApi<t> {
  setState: SetStateInternal<t>
  getState: () => T
  getInitialState: () => T
  subscribe: (listener: (state: T, prevState: T) => void) => () => void
}
</t></t>

setState menerima dua parameter

1. separa 

2. gantikan

Mari kita lakukan percubaan menggunakan contoh apl demo yang disediakan dalam repo Zustand.

Saya menambahkan beberapa pernyataan konsol di dist untuk melihat perkara yang separa dan menggantikannya.

Dan inilah nilainya apabila anda mengemas kini kiraan dalam contoh tunjuk cara.

Memandangkan separa ialah fungsi di sini,

 

const nextState = typeof partial === "function" ? partial(state) : partial;

Jika anda melihat dengan teliti, keadaan dimulakan apabila anda menciptaStore dan berada di luar fungsi setState. Adakah itu berbunyi loceng? Rujuk Penutupan dalam Javascript.

separa ialah fungsi anak panah

(state)=>({
    count: state.count + 1
})

Keindahannya ialah anda boleh memanggil fungsi ini dengan parameter kerana ia mengembalikan fungsi, itulah sebabnya kami mempunyai separa(keadaan) dan keadaan berada di luar setState. setState mempunyai akses kepada pembolehubah keadaan ini, terima kasih kepada penutupan dalam JavaScript.

Anda boleh menjalankan coretan kod di bawah dalam konsol penyemak imbas dan ia merekodkan perkara yang anda hantar sebagai parameter.

(a => console.log(a))("test")
// Output: test

Saya menulis artikel terperinci tentang Object.is dan Object.assign penggunaan. Memandangkan penggantian adalah batal,

if (!Object.is(nextState, state)) {
  const previousState = state
  state =
    (replace ?? (typeof nextState !== 'object' || nextState === null))
      ? (nextState as TState)
      : Object.assign({}, state, nextState)
  listeners.forEach((listener) => listener(state, previousState))
}

State dikemas kini menggunakan Object.assign. Kami akan melihat kes penggunaan lanjutan di mana penggantian tidak batal dan memahami cara setState berkelakuan dalam artikel akan datang.

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

2. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L9

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

4. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Atas ialah kandungan terperinci setState dalam kod sumber negeri.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!