Rumah > hujung hadapan web > tutorial js > setState dalam kod sumber negeri.

setState dalam kod sumber negeri.

WBOY
Lepaskan: 2024-09-06 06:43:02
asal
1173 orang telah melayarinya

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.

setState in Zustand

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
}
Salin selepas log masuk

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.

setState in Zustand

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

setState in Zustand

Memandangkan separa ialah fungsi di sini,

 

const nextState = typeof partial === "function" ? partial(state) : partial;
Salin selepas log masuk

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
})
Salin selepas log masuk

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
Salin selepas log masuk

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))
}
Salin selepas log masuk

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan